Angular中如何条件显示下拉列表选项？

你的代码里有几个Angular语法使用不当的地方，导致控制台报错，我来帮你梳理并修正：

错误点拆解 #

• 插值表达式误用：在*ngIf的条件里，你用了{{i}}，但Angular的指令表达式不需要用插值包裹，直接使用变量i即可，否则会触发语法错误。
• 无效的内容包裹：用ng-template包裹option的内容，会导致即使条件不满足，空的option依然会被渲染出来，这不符合你“只显示符合条件的选项”的需求。
• 属性绑定不规范：value="{{i}}"虽然能工作，但更推荐用Angular的属性绑定语法[value]="i"，更符合框架规范。

修正后的代码 #

<div *ngIf="header">
  <select (change)="selectTarget($event)">
    <option 
      *ngFor="let option of header; let i=index" 
      [value]="i"
      *ngIf="table_settings['tags'][i] === 'Num'"
    >
      {{ option }}
    </option>
  </select>
</div>

额外优化建议 #

如果table_settings['tags']可能为undefined或者长度和header不一致，建议添加空值判断，避免出现Cannot read properties of undefined的错误：

<div *ngIf="header && table_settings?.tags">
  <select (change)="selectTarget($event)">
    <option 
      *ngFor="let option of header; let i=index" 
      [value]="i"
      *ngIf="table_settings.tags[i] === 'Num'"
    >
      {{ option }}
    </option>
  </select>
</div>

这里用了可选链操作符?.来确保table_settings存在时才访问tags，同时把table_settings['tags']改成了更简洁的点语法table_settings.tags（如果属性名是合法标识符的话推荐这么用）。

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