angular 动态显示系列

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: () => {},
 });