在 Mat-Table 中使用 renderRows 时遇到问题

Question

当使用 renderRows() 方法添加数据但它不起作用时，我正在尝试以 Angular 8 更新我的表。

我在得到响应后使用了@ViewChild 和 .renderRows() 方法，任何人都可以解释一下这个的含义：{static: true}

//TODO: allocateMoney.ts

@ViewChild(MatTable, { static: true }) table: MatTable<any>;

openDialog() {

    let dialogRef = this.dialog.open(AllocateMoneyFormComponent, {
      disableClose: true,
      data: {
        projectId: this.projectId,
        budgetId: this.budgetId
      }
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result == 'loadData') {
        this.table.renderRows();
      }});
  }

//TODO: allocateMoney.html

<table class="example-list" mat-table [dataSource]="budget_dm.budget[budgetId].allocateMoney.tables.rows"
    class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell [style.display]="'none'" *matHeaderCellDef> Id </th>
      <td mat-cell [style.display]="'none'" *matCellDef="let element">{{element.id}}
      </td>
    </ng-container>

    <ng-container matColumnDef="categoryCode">
      <th mat-header-cell *matHeaderCellDef style="padding-left: 15px;"> Acc </th>
      <td mat-cell *matCellDef="let element">{{element.categoryCode}}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="budget_dm.budget[budgetId].allocateMoney.tables.cols"></tr>
    <tr class="example-box" mat-row
      *matRowDef="let row; columns: budget_dm.budget[budgetId].allocateMoney.tables.cols;"></tr>
  </table>

//TODO: allocateMoneyForm.ts

isSubmitForm() {
    this.formdata.raw.projectId = this.projectId;
    this.formdata.raw.budgetId = this.budgetId;
    this.budgetService.allocateMoney(this.orgId, this.formdata.raw).then(resp => {
      if (resp) {
        this.toast_.successToastr("Money Allocated Success", "SUCCESS");
      } else {
        this.toast_.errorToastr("Money Allocated Failure", "ERROR");
      }

    });
    this.dialogRef.close('loadData');

  }

core.js:5847 错误类型错误：无法读取未定义的属性“renderRows” 在 SafeSubscriber._next (allocate-money.component.ts:57) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53) 在 Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) 在 SafeSubscriber._next (dialog.es5.js:429) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) 在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)

Answer 1

尝试将#table 引用添加到您的 html mat table 中，这是为了确保您的 mat table childview 被很好地实例化