Angular模板中如何仅展示category为1的JSON项的description内容

你可以根据项目场景选择以下任意一种实现方式：

• 模板内直接加条件判断（改动最小，适合简单逻辑场景）
  直接在承载description的内容容器上添加*ngIf条件判断，仅当item.category === 1时才渲染描述内容，category为2时对应DOM节点不会生成，自然实现隐藏效果。
  修改后的模板代码如下：

<div *ngFor='let item of todo' >
    <mat-card class="example-card" >
      <img class='imag' mat-card-image src="{{item?.image}}">
      <!-- 新增ngIf判断，仅category为1时渲染描述区域 -->
      <mat-card-content class='amt' *ngIf="item?.category === 1" >
        <p>
          {{item?.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <a class="a" mat-flat-button color="warn" href="{{item?.buy}}" target="_blank">detail </a>
      </mat-card-actions>
    </mat-card>
</div>

如果你需要保留描述区域的DOM占位、仅隐藏文字内容，可以不用*ngIf，改用样式绑定实现：

<mat-card-content class='amt' [class.hide-desc]="item?.category !== 1">

对应在组件样式文件中添加样式：

.hide-desc {
  display: none;
}

• 数据源层预处理（适合多逻辑复用场景）
  如果模板中还有多处依赖category判断的逻辑，可以在组件类中提前对todo数据做预处理，减少模板中的逻辑判断。示例代码：

// 组件类中添加getter，返回处理后的数据
get todoList() {
  return this.todo.map(item => ({
    ...item,
    // category不为1时将description置空，模板无需额外修改
    description: item?.category === 1 ? item.description : ''
  }))
}

之后把模板中*ngFor的遍历对象从todo改为todoList即可，原有{{item?.description}}的绑定不需要调整。

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