angular8 - 在 Mat-Table 中使用 renderRows 时遇到问题
问题描述
当使用 renderRows() 方法添加数据但它不起作用时,我正在尝试以角度 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 错误类型错误:无法读取 SafeSubscriber._next (allocate-money.component.ts:57) 处未定义的属性“renderRows”,位于 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) 在主题。 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(订阅者。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)
解决方案
尝试将 #table 引用添加到您的 html mat table ,这是为了确保您的 mat table childview 被很好地实例化
推荐阅读
- c# - 定义一个泛型变量并动态改变它
- xcode - 在 xcode 12.5 中构建具有其他模块作为依赖项的模块
- windows - 如何使用“|”在 powershell 输出中查找字符串?
- java - 在Eclipse中调试java程序的问题
- shell - 编写一个 shell 脚本来在给定的 x、y 位置显示任何字符串并在 Unix 中显示当前终端号?
- java - Android Studio RecyclerView
- node.js - 在公共服务器上隐藏 .env
- c++ - 将 declval 与引用类型一起使用
- typescript - 使用 TypeScript 泛型作为自己的参数,或将其指定为自己的默认参数
- c# - 将静态资源中的组合框选择绑定到 Datagrid ItemSource