Angular中如何在ngFor中访问TemplateRef对应ng-template的label属性？

核心思路 #

ng-template上的label属于自定义属性，TemplateRef本身不会暴露这类自定义属性，需要通过对应的DOM元素（即<ng-template>标签）来读取该属性值。

具体实现步骤 #

1. 组件中注入依赖并定义数据结构
   在组件类中注入ChangeDetectorRef，同时定义用于存储模板和对应标签的数组，以及获取模板和对应DOM元素的QueryList：

   import { Component, ViewChildren, QueryList, TemplateRef, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourComponent implements AfterViewInit {
     template!: TemplateRef<any>;
     // 存储模板与对应label的数组
     templatesWithLabels: Array<{ template: TemplateRef<any>, label: string }> = [];
   
     @ViewChildren('tUser') templateRefs!: QueryList<TemplateRef<any>>;
     @ViewChildren('tUser', { read: ElementRef }) templateElements!: QueryList<ElementRef>;
   
     constructor(private cdRef: ChangeDetectorRef) {}
   }
   

2. 在ngAfterViewInit中关联模板与label属性
   视图初始化完成后，遍历模板列表，通过对应的DOM元素读取label属性，组装成可用的数组：

   ngAfterViewInit() {
     this.templateRefs.forEach((ref, index) => {
       const label = this.templateElements.toArray()[index].nativeElement.getAttribute('label');
       this.templatesWithLabels.push({ template: ref, label });
     });
   
     // 纯净Angular项目需手动触发变更检测，Firebase项目因自动触发可省略
     this.cdRef.detectChanges();
   }
   

3. 修改模板遍历逻辑
   将原*ngFor遍历的templates替换为新的templatesWithLabels数组，直接访问label属性：

   <ng-container [ngTemplateOutlet]="template"></ng-container>
   <button mat-list-item *ngFor="let t of templatesWithLabels" (click)="template = t.template">
       {{ t.label }}
   </button>
   
   <ng-template #tUser label="User 1">
           user
   </ng-template>
   
   <ng-template #tUser label="User 2">
           user2
   </ng-template>
   
   <ng-template #tUser label="User 3">
           user3
   </ng-template>
   

补充说明 #

• 集成Firebase的项目中，Firebase的相关操作会自动触发Angular的变更检测，因此无需手动调用detectChanges()；
• 纯净Angular项目中，由于ngAfterViewInit阶段视图已完成初始化，此时修改组件属性后需要手动调用detectChanges()，通知Angular更新视图。

内容的提问来源于stack exchange，提问作者dsl400