Angular多维数组嵌套NgFor循环失效问题排查求助

你的第二个*ngFor无法工作，大概率是以下几个问题导致的，逐一排查修正即可：

1. 变量作用域错误 #

你代码里的activeOptions数组如果是直接写在模板中的，模板无法访问这个变量。必须将数组定义在组件的.ts文件中，作为组件的公共属性：

// 组件的.ts文件
export class YourComponent {
  activeOptions = [
    ['Akteure der Erfasung', true, ['hello','achi','ami']],
    ['Orte der Erfassung', true, ['a']],
    ['Zeitpunkte der Erfassung', true, ['b']],
    ['Rechtsgrundlagen', true, ['c']]
  ];
}

2. 属性绑定语法错误 #

disabled={{a[1]}}这种插值写法不符合Angular的属性绑定规范，应该改用方括号的属性绑定语法：

[disabled]="a[1]"

3. 渲染结果不明显（视觉问题） #

第二个*ngFor循环的<span>是行内元素，多个值会连在一起显示，可能让你误以为没渲染。可以给span添加样式，比如增加间距或换行，方便查看结果：

<span *ngFor="let b of a[2]" style="margin-right: 8px;">{{b}}</span>

修正后的完整模板代码 #

<mat-option [disabled]="a[1]" *ngFor="let a of activeOptions" [value]="a[0]">
  <b>{{a[0]}}</b>
  <span *ngFor="let b of a[2]" style="margin-right: 8px;">{{b}}</span>
</mat-option>

按照以上步骤修正后，嵌套的*ngFor就能正常遍历多维数组的内层元素了。

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