Angular 4 Materialtabelle nicht aktualisiert

Question

Ich versuche Angular 4 Material MatTable zu verwenden, es von meinem Server zu aktualisieren, Problem ist, dass es nur einmal funktioniert.

Ich habe eine Suchschaltfläche, die die Suchfunktion aktiviert, es funktioniert einmal und aktualisiert die Tabelle, aber bei der zweiten Suche scheint es nur die Listenlänge zu ändern, ohne eine der Zeilen Daten zu aktualisieren.

Meine Vermutung ist, dass ich BehaviourSubject nicht richtig verwende oder ich sollte Angular sagen, um die Daten irgendwie zu aktualisieren Da es scheint, ändert die Tabelle ihre Länge (Die Bildlaufleiste der Liste wird kürzer) Aber es tut einfach nicht aktualisieren, um die Daten

import { Component, OnInit } from '@angular/core'; 
import { DataSource } from '@angular/cdk/collections'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { DialogService } from "ng2-bootstrap-modal"; 
import { ServerApiService } from "../../services/ServerApi.service"; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/of'; 
import {Product} from "../../Models/Product"; 
import {Offer} from "../../Models/Offer"; 
import {OffersComponent} from "../Offers/Offers.component"; 

@Component({ 
    selector: 'app-store-stats', 
    templateUrl: './search-product.component.html', 
    styleUrls: ['./search-product.component.less'], 
    providers: [DialogService] 
}) 
/** StoreStats component*/ 
export class SearchProductComponent implements OnInit { 
    keyword: string; 
    displayedColumns = ['image', 'position', 'name', 'weight','offers']; 
    dataSubject = new BehaviorSubject<Product[]>([]); 
    dataSource = new ExampleDataSource(this.dataSubject); 
    canSearch = true; 

    constructor(private serverApi: ServerApiService, private dialogService: DialogService) { 

    } 

    showOffers(Offers: Offer[]) { 
     this.dialogService.addDialog(OffersComponent, { 
      title:'Offers', 
      modalOffers: Offers}); 
    } 

    trackByFn(index: number) { 
     return index; 
    } 

    Search() { 
     this.canSearch = false; 
     this.serverApi.getProducts(this.keyword) 
      .subscribe(
       (response) => { 
        let data:Product[] = response.json() as Product[]; 
        this.dataSubject.next(data); 
        this.canSearch = true; 
       }, 
       (error) => { 
        this.canSearch = true; 
        console.log(error); 
       } 
      ); 
    } 
    /** Called by Angular after StoreStats component initialized */ 
    ngOnInit(): void { } 
} 

/** 
* Data source to provide what data should be rendered in the table. The observable provided 
* in connect should emit exactly the data that should be rendered by the table. If the data is 
* altered, the observable should emit that new set of data on the stream. In our case here, 
* we return a stream that contains only one set of data that doesn't change. 
*/ 

var Offers: Offer[] = new Array<Offer>(); 
Offers[0] = new Offer("123123", 2,"NEW"); 
Offers[1] = new Offer("123123", 2,"Like New"); 

export class ExampleDataSource extends DataSource<Product> { 

    constructor(private subject: BehaviorSubject<Product[]>) { 
     super(); 
    } 
    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Product[]> { 
     return this.subject; 
    } 
    disconnect() { } 
} 

Answer 1

es mir richtig nicht verwenden, um die TrackBy Funktion des Tisches scheint, es nicht zu verstehen, Verursachung, wenn ein Element ändert.