如何在Angular的ngFor中使用ngIf并修改audience列内容

1. 根据audience值修改显示内容 #

提供两种实现方式，按需选择：

方式一：模板内直接写条件判断（适合简单逻辑） #

在Audience列的<td>中使用嵌套三元表达式：

<td>
  {{ i.audience === 'abc' ? 'abcdef' : i.audience === 'uvw' ? 'uvwxyz' : null }}
</td>

方式二：组件内定义方法（适合复杂逻辑，方便后续维护） #

先在AppComponent中添加处理显示文本的方法：

getAudienceDisplay(audience: string): string | null {
  switch(audience) {
    case 'abc':
      return 'abcdef';
    case 'uvw':
      return 'uvwxyz';
    default:
      return null;
  }
}

再在模板里调用这个方法：

<td>{{ getAudienceDisplay(i.audience) }}</td>

2. 为第1列应用ngIf指令 #

ngIf可用于控制单元格或整列的显示，以下是两种常见场景：

场景A：控制单个单元格显示（比如仅当audience不为空时显示） #

<td *ngIf="i.audience">{{ getAudienceDisplay(i.audience) }}</td>
<!-- 条件不满足时显示占位符 -->
<td *ngIf="!i.audience">--</td>

场景B：控制整列显示（比如仅当数组中存在特定audience值时显示列） #

先在组件内添加判断逻辑：

showAudienceColumn: boolean;

ngOnInit() {
  // 判断数组中是否有audience为'abc'或'uvw'的项
  this.showAudienceColumn = this.siteUrl.some(item => ['abc', 'uvw'].includes(item.audience));
}

再给表头和单元格都加上ngIf：

<thead>
  <tr>
    <th *ngIf="showAudienceColumn">Audience</th>
    <th>Country</th>
    <th>Language</th>
    <th>Concat</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let i of siteUrl; let b = index">
    <td *ngIf="showAudienceColumn">{{ getAudienceDisplay(i.audience) }}</td>
    <td>{{ i.country }}</td>
    <td>{{ i.language }}</td>
    <td>{{ `${baseUrl}${i.audience}/${i.country}/${i.language}` }}</td>
  </tr>
</tbody>

3. 优化第4列的拼接写法 #

可简化原有的字符串拼接逻辑，更易读：

<td>{{ `${baseUrl}${i.audience}/${i.country}/${i.language}` }}</td>

完整组件代码 #

interface siteInterface {
  audience:string;
  country:string;
  language:string;
}

const siteArray:siteInterface[]=[
  {
    audience:'abc',
    country:'us',
    language:'en',
  },
  {
    audience:'uvw',
    country:'de',
    language:'de',
  },
  {
    audience:'xyz',
    country:'fr',
    language:'fr',
  }
];

const baseUrlConst = 'https://www.testwebsite.com/';

export class AppComponent implements OnInit {
  constructor() {}
  
  siteUrl=siteArray;
  baseUrl=baseUrlConst;
  showAudienceColumn: boolean;

  ngOnInit() {
    this.showAudienceColumn = this.siteUrl.some(item => ['abc', 'uvw'].includes(item.audience));
  }

  getAudienceDisplay(audience: string): string | null {
    switch(audience) {
      case 'abc':
        return 'abcdef';
      case 'uvw':
        return 'uvwxyz';
      default:
        return null;
    }
  }
}

完整模板代码 #

<table class="table table-striped">
  <thead>
    <tr>
      <th *ngIf="showAudienceColumn">Audience</th>
      <th>Country</th>
      <th>Language</th>
      <th>Concat</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of siteUrl; let b = index">
      <td *ngIf="showAudienceColumn">{{ getAudienceDisplay(i.audience) }}</td>
      <td>{{ i.country }}</td>
      <td>{{ i.language }}</td>
      <td>{{ `${baseUrl}${i.audience}/${i.country}/${i.language}` }}</td>
    </tr>
  </tbody>
</table>

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