1.动态显示列属性,自定义行并添加点击事件
1.html:后台动态赋值[columns],并遍历[columns]
2.ts中columns的值动态赋值后
this.cdr.detectChanges(); //需要通知Angular才能检测到这些更改(检测本地更改)并更新视图. --改变[data]值时执行的方法
this.st.resetColumns(); //来更新列定义并重新加载数据
this.st.reload(); // 刷新当前页
3.cdr 如何配置
@Component({
selector: 'app-summaryCard',
templateUrl: './summaryCard.component.html',
styleUrls: ['./summaryCard.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
constructor(
private urls: Urls,
private http: _HttpClient,
private msg: NzMessageService,
private modalSrv: NzModalService,
private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer,
) {}
2.自定义表格弹框
<ng-template #detailTable>
<div [innerHTML]="tableHtml"></div>
</ng-template>
// 引入
@ViewChild('detailTable', { static: true }) detailTable: TemplateRef<any>;
// 自定义表格
htmlContent=`<table><tr><td>111</td></tr></table>`
//this.sanitizer.bypassSecurityTrustHtml 信任该内容,使css映射到前台
this.tableHtml = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
this.modalSrv.create({
nzTitle: null,
nzContent: this.detailTable,
nzOnOk: () => {},
});