没有搜索结果绑定到材料表

Question

我正在为我的网络应用程序实现 Angular 2+ Material Table，我想我已经完成了大部分工作。但是，我在绑定工作时遇到了一些困难。基本上，我想要做的是有一堆下拉值，根据我选择的值，这些值通过 api 调用发送到服务器以获取与我传递的值匹配的项目。匹配结果应显示在材料表中。不幸的是，按照我的设置方式，我目前拥有的材料表中没有显示任何内容。我检查了是否从 api 调用中获取了值，并且确实从我的 api 调用中获取了正确的值，因此不确定绑定本身失败的原因。

这是我的搜索功能和垫表的一些设置：

displayedColumns = ['Store', 'SKU#', 'Department', 'Class', 'Material', 'Style', 'Description', 'LastUpdate', 'Active', 'RetailPrice'];
PRODUCT_DATA: Array<Product>;
dataSource = new MatTableDataSource(this.PRODUCT_DATA);
product: IProduct;

search(selectedDepartment: string, selectedClass: string, selectedMaterial: string, selectedStyle: string, isActive: string,
    productSku: string) {
    this._itemPriceMangerService.getProductsBasedOnSearch(98, productSku, selectedDepartment, selectedClass,
      selectedMaterial, selectedStyle, isActive).subscribe(data => {

        this.product = data;
        this.PRODUCT_DATA = this.product._products;

        this.dataSource.filter = this.storeId + productSku + selectedDepartment + selectedClass +
        selectedMaterial + selectedStyle + isActive; }); }

这是我的搜索按钮和材料表：

<div style="padding:10px;">
        <button class="search" (click)="search(selectedDepartment.value, selectedClass.value, selectedMaterial.value, selectedStyle.value, selectedActive.value, this.productSku.value)">
            {{ 'Search' | translate }}
        </button>
    </div> 

    <div>
        <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="Store">
            <mat-header-cell *matHeaderCellDef > {{Store}} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._storeKey}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="SKU#">
            <mat-header-cell *matHeaderCellDef >  {{ SKU# } </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._productSkuKey}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Department">
            <mat-header-cell *matHeaderCellDef > {{ Department }} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._department}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="Class">
            <mat-header-cell *matHeaderCellDef > {{ Class }} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._productClass}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Material">
            <mat-header-cell *matHeaderCellDef > {{ Material }} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._productMaterial}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Style">
            <mat-header-cell *matHeaderCellDef > {{ Style }}</mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._productStyle}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Description">
            <mat-header-cell *matHeaderCellDef >  {{ Description}} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._description}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="LastUpdate">
            <mat-header-cell *matHeaderCellDef > {{ LastUpdate }} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._lastUpdatedTimestamp}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Active">
            <mat-header-cell *matHeaderCellDef > {{ Active }} </mat-header-cell>
            <mat-cell *matCellDef="let product">
              <select>
                <option *ngFor="let active of activeTypes" [ngValue]="active">{{product._isActive}}</option>
              </select>
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="RetailPrice">
            <mat-header-cell *matHeaderCellDef > {{'RetailPrice'}} </mat-header-cell>
            <mat-cell *matCellDef="let product">{{product._price}}</mat-cell>
        </ng-container>
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
    </div>

当我执行console.log(JSON.stringify(this.PRODUCT_DATA)) 时，我得到的是：

[
   {
      "_storeKey":98,
      "_productSkuKey":12345,
      "_department":234,
      "_productClass":12,
      "_productMaterial":"Material 1",
      "_productStyle":23,
      "_description":"Product Description 1",
      "_lastUpdatedTimestamp":"2018-03-16T13:54:49",
      "_isActive":"Yes",
      "_price":149.95
   }
]

所以数据有，只是绑定不了？

Answer 1

每当您想要更新数据时，您都必须更新数据源的数据。因此，在您的情况下，您必须以这种方式修改搜索功能：

...
this.product = data;
this.PRODUCT_DATA = this.product._products;
this.dataSource.data = this.PRODUCT_DATA;
...

因此，每当您从服务器获取更新数据时，您必须在this.dataSource.data 中进行设置。我还可以看到您正在使用过滤器，过滤器应该仅在您在本地过滤表时使用，但我想在这种情况下您想要执行搜索服务器端。