Question

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

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

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中进行设置。我也可以看到你正在使用过滤器，只有当你在本地过滤表时才应该使用过滤器，但我想在这种情况下你想要执行搜索服务器端。

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

1 个答案: