在 mat-table 上调用 renderRow() 时遇到问题答案

【问题标题】：trouble with calling renderRow() on mat-table在 mat-table 上调用 renderRow() 时遇到问题
【发布时间】：2018-10-07 21:19:07
【问题描述】：

我想在单击按钮时按材料表添加行。但我似乎无法在我的桌子上调用 renderRows() 方法。

以下是我的代码中的一些相关部分：

<div fxFlex="20%" fxLayout="row" fxLayoutAlign="center">
        <input fxFlex="10%" matInput placeholder="Part #" type="number" [(ngModel)]="partNumber">
        <input fxFlex="20%" matInput placeholder="Video Url" type="text" [(ngModel)]="videoUrl">
        <input fxFlex="40%" matInput placeholder="Download Url" type="text" [(ngModel)]="downloadUrl">
        <button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo()"> <-- I would like my table to update on this click
            Add Video
        </button>
    </div>
    <div *ngIf="urlCollection.length > 0">
        <mat-table #videoTable videoTable [dataSource]="dataSource">

            <-- Table columns -->

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

在 TS 方面：

addVideo()
{
  // get data from the the inputs and add it to the table data collection;
 // Ideally I would like to have the renderRow here. 
}

我曾尝试在按钮单击事件中调用 renderRows()，如下所示：

<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.renderRows()">

像这样：

<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.table.renderRows()">

我收到类似于“无法在未定义时调用 renderRow()”的错误

我尝试在我的 typescript 方法中调用 renderRows() 方法，如下所示：

@ViewChild('videoTable') videoTable: MatTableModule;
// rest of the component

addVideo()
{
    // add to the datasource collection
    this.videoTable.renderRows();
}

我收到“'MatTableModule' 类型的属性'renderRows' 不存在”错误。

当我单击按钮并更新我的数据源时，如何更新我的表格？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

你用错误的类型声明了videoTable，它应该是MatTable。

试试下面的代码示例：

import { MatTable } from '@angular/material';

@ViewChild('videoTable') videoTable: MatTable<your type>;
// rest of the component

addVideo()
{
  // add to the datasource collection
  this.videoTable.renderRows();        // call from typescript
}

// template example
// call renderRows() directly from videoTable
<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.renderRows()">

推荐工作demo。

【讨论】：