Angular 角度4材质表不更新

我想用Angular 4 Material MatTable从我的服务器上更新它， 问题是它只工作一次

我有一个搜索按钮，可以激活搜索功能，它工作一次并更新表，但在第二次搜索时，它似乎只是更改列表长度，而不更新任何行数据

我的猜测是，我只是没有正确地使用BehaviorSubject，或者我应该告诉angular以某种方式刷新数据，因为表似乎确实改变了它的长度（列表的滚动条变短了），但它只是没有刷新数据

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() { }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/cdk/collections'导入{DataSource}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从“ng2引导模式”导入{DialogService}；
从“../../services/ServerApi.service”导入{ServerApiService}”；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/startWith'；
导入“rxjs/add/observable/merge”；
导入'rxjs/add/operator/map'；
导入“rxjs/add/observable/of”；
从“../../Models/Product”导入{Product}；
从“../../Models/Offer”导入{Offer}”；
从“./Offers/Offers.component”导入{OffersComponent}；
@组成部分({
选择器：“应用商店统计数据”，
templateUrl:'./search product.component.html'，
styleUrls:['./搜索产品.component.less']，
提供者：[对话服务]
})
/**StoreStats组件*/
导出类SearchProductComponent实现OnInit{
关键词：字符串；
displayedColumns=['image'、'position'、'name'、'weight'、'offers']；
dataSubject=新的行为主体（[]）；
dataSource=新示例dataSource（this.dataSubject）；
canSearch=true；
构造函数（专用serverApi:serverApi服务，专用dialogService:dialogService）{
}
showOffers（优惠：优惠[]）{
此.dialogService.addDialog（OfferComponent{
标题:"优惠",，
改装司机：报价}）；
}
trackByFn（索引：编号）{
收益指数；
}
搜索（）{
this.canSearch=false；
this.serverApi.getProducts（this.keyword）
.订阅(
（回应）=>{
让数据：Product[]=response.json（）作为Product[]；
this.dataSubject.next（数据）；
this.canSearch=true；
},
（错误）=>{
this.canSearch=true；
console.log（错误）；
}
);
}
/**在StoreStats组件初始化后由Angular调用*/
ngOnInit（）：void{}
}
/**
*数据源提供应在表中呈现的数据。所提供的可观测数据
*in connect应该准确地发出应该由表呈现的数据。如果数据是
*修改后，可观察对象应该在流上发出新的数据集。在我们这里，
*我们返回一个只包含一组不变数据的流。
*/
var Offers:Offer[]=新数组（）；
要约[0]=新要约（“123123”，2，“新”）；
要约[1]=新要约（“123123”，2，“如新”）；
导出类ExampleDataSource扩展了DataSource{
构造函数（私有主体：行为主体）{
超级（）；
}
/**由表调用的Connect函数，用于检索包含要呈现的数据的一个流*/
connect（）：可观察{
返回此.subject；
}
断开连接（）{}
}

似乎我没有正确使用表的TrackBy函数，

---

导致它无法理解项目何时更改。

要帮助调试，可以点击进入表的数据流。在

connect（）

中，do

返回这个.subject.do（data=>console.log（'sending to table'，data'）我知道该表获取数据。。例如：如果我第一次搜索足球，表中会加载足球产品，假设我现在第二次搜索篮球时发现了X个项目，如果篮球产品计数为X+10，那么表中会加载额外的10个篮球搜索项目，如果它小于或等于，您将看不到任何更改。。。该表只是不更新现有项，但它可以添加额外项。。。它不明白整个收藏都变了。它应该移除所有的足球产品，并添加篮球产品，这是角度故障还是桌面故障？@WillHowe