J'écris une table en utilisant la conception angulaire 4 et matérielle et je veux lier des données de service à table. Mon service utilise http pour obtenir des données du serveur et renvoie par conséquent Promise ou Observable. Comment puis-je affecter le résultat de la méthode Observable ou Promise à la variable dataChange de type BehaviorSubject <>?Angular 4 - Résultat de Observable to BehaviorSubject
import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { MdPaginator, MdSort } from '@angular/material';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
declare let d3: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
displayedColumns = ['shiftDate', 'swipeIn', 'swipeOut', 'duration', 'status'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
@ViewChild(MdPaginator) paginator: MdPaginator;
@ViewChild(MdSort) sort: MdSort;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);
}
}
export interface attendanceData {
shiftDate: string;
swipeIn: string;
swipeOut: string;
duration: string;
status: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<attendanceData[]> = new BehaviorSubject<attendanceData[]>([]);
get data(): attendanceData[] {
let data = [
{
"shiftDate": "17-July-2017",
"swipeIn": "10:00 AM",
"swipeOut": "06:00 PM",
"duration": "8 Hours",
"status": "PRESENT"
},
{
"shiftDate": "16-July-2017",
"swipeIn": "9:00 AM",
"swipeOut": "5:00 AM",
"duration": "7 Hours",
"status": "PRESENT"
}
];
return data;
}
constructor() {
this.dataChange.next(this.data);
}
}
export class ExampleDataSource extends DataSource<any> {
_filterChange = new BehaviorSubject('');
get filter(): string { return this._filterChange.value; }
set filter(filter: string) { this._filterChange.next(filter); }
constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator, private _sort: MdSort) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<attendanceData[]> {
const displayDataChanges = [
this._exampleDatabase.dataChange,
this._paginator.page,
this._sort.mdSortChange
];
return Observable.merge(...displayDataChanges).map(() => {
// const data = this._exampleDatabase.data.slice();
const data = this.getSortedData();
// Grab the page's slice of data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
});
}
disconnect() { }
getSortedData(): attendanceData[] {
const data = this._exampleDatabase.data.slice();
if (!this._sort.active || this._sort.direction == '') { return data; }
return data.sort((a, b) => {
let propertyA: number | string = '';
let propertyB: number | string = '';
switch (this._sort.active) {
case 'shiftDate': [propertyA, propertyB] = [a.shiftDate, b.shiftDate]; break;
case 'swipeIn': [propertyA, propertyB] = [a.swipeIn, b.swipeIn]; break;
case 'swipeOut': [propertyA, propertyB] = [a.swipeOut, b.swipeOut]; break;
case 'duration': [propertyA, propertyB] = [a.duration, b.duration]; break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
});
}
}
hey, est-ce que [ma réponse] (https://stackoverflow.com/a/45296659/2545680) a aidé? –
J'ai fait dans le constructeur this.myService.getObjects(). Subscribe (res => this.dataChange.next (res)); – user
Vous n'avez pas besoin d'appeler 'next' sur le sujet comme vous le faites. Voir la solution dans ma réponse –