Angular 4：如何根据条件显示td元素中的内容？

嘿，作为Angular 4的新手，咱们先拆解下你代码里的几个小问题，再一步步调整出符合需求的实现：

原代码的核心问题 #

• <tr>的直接子元素只能是<td>或<th>，你用<span>包裹<td>会破坏表格的HTML结构，导致渲染异常
• [(ngModel)]绑定在<td>上是无效的，因为<td>不是表单控件，ngModel需要配合<input>这类表单元素使用
• 嵌套的结构可以更简洁，避免不必要的元素嵌套

修正后的基础实现（匹配你的需求） #

假设你要实现的是：只渲染第一行（idx === 0）的<td>，且每个<td>根据name.value是否存在显示蓝色圆点，可以这样写：

<tr *ngFor="let item of calendarTableSelected; let idx = index">
  <!-- 用ng-container做虚拟容器，不会生成多余HTML元素，避免破坏表格结构 -->
  <ng-container *ngIf="idx === 0">
    <td style="width:15%;" *ngFor="let name of item.results">
      <!-- 当name.value存在时，显示蓝色圆点 -->
      <span *ngIf="name.value" style="color:blue;">&#9679;</span>
      
      <!-- 如果需要编辑name.value，添加input元素（记得导入FormsModule） -->
      <!-- <input [(ngModel)]="name.value" name="promoOne_{{idx}}" placeholder="输入值" /> -->
    </td>
  </ng-container>
</tr>

多条件场景的优化 #

如果需要根据name.value的不同值显示不同内容，可以用两种方式实现：

方式1：多*ngIf分支

适合条件较少的场景：

<td style="width:15%;" *ngFor="let name of item.results">
  <span *ngIf="name.value === 'active'" style="color:green;">&#9679;</span>
  <span *ngIf="name.value === 'inactive'" style="color:red;">&#9679;</span>
  <span *ngIf="!name.value">-</span>
</td>

方式2：ngSwitch（更适合多条件场景）

逻辑更清晰，避免重复判断：

<td style="width:15%;" *ngFor="let name of item.results" [ngSwitch]="name.value">
  <span *ngSwitchCase="'active'" style="color:green;">&#9679;</span>
  <span *ngSwitchCase="'inactive'" style="color:red;">&#9679;</span>
  <span *ngSwitchDefault>-</span>
</td>

额外提醒 #

如果要使用[(ngModel)]，记得在你的模块（比如AppModule）中导入FormsModule，否则会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入
    FormsModule
  ]
})
export class AppModule { }

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