Angular中如何为mat-tab组件按条件动态设置标签

解决方法 #

Angular 中不支持嵌套使用插值语法 {{}}，你可以选择以下两种任意一种合法写法实现需求：

• 写法1：使用方括号属性绑定（推荐）
  给 label 属性加方括号标识Angular表达式绑定，直接在引号内写三元表达式即可，不需要额外加插值符：

  <mat-tab *ngFor="let data of datas; let i = index" [label]="i === 0 ? 'First' : 'Tab ' + (i + 1)">
  

• 写法2：使用单组插值语法
  把整个三元判断逻辑都放在同一对 {{}} 内即可，不要嵌套：

  <mat-tab *ngFor="let data of datas; let i = index" label="{{i === 0 ? 'First' : 'Tab ' + (i + 1)}}">
  

补充说明 #

方括号绑定 [] 会直接传递表达式的计算结果到目标属性，插值语法 {{}} 会先把表达式结果转成字符串再赋值，对于这个场景下的字符串类型label属性，两种写法效果完全一致。

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