angular 动态显示系列

最新推荐文章于 2025-05-13 23:16:30 发布

原创最新推荐文章于 2025-05-13 23:16:30 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Angular应用中实现表格列的动态显示及行的自定义，并添加点击事件。同时，展示了如何配置ChangeDetectorRef来检测并更新视图更改，以及如何创建自定义的HTML内容弹框。

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