动态渲染的mat-card如何实现仅点击当前卡片时显示对应div

你可以通过记录选中项标识 + 条件渲染的方式实现该需求，具体修改如下： #

1. 调整组件TS文件代码 #

首先在你的组件类中定义变量存储当前选中的卡片对应数据，以及点击触发的方法：

// 定义变量存储当前选中的language项，初始为null
selectedLanguage: any = null;

// 卡片点击触发方法
onCardClick(language: any) {
  // 支持点击已选中卡片取消选中的逻辑，如果不需要可以直接赋值为language即可
  this.selectedLanguage = this.selectedLanguage === language ? null : language;
}

如果你的language对象存在唯一主键（比如id字段），也可以用主键做判断，避免对象引用带来的判断异常：

selectedLanguageId: number | null = null;

onCardClick(language: any) {
  this.selectedLanguageId = this.selectedLanguageId === language.id ? null : language.id;
}

2. 调整模板HTML代码 #

给mat-card绑定点击事件，同时给需要显示的图片容器加*ngIf条件判断，仅当前卡片对应数据和选中项匹配时才显示：

<div [fxFlex]="(50/gridColumns) + '%'" fxFlex.xs="50%" fxFlex.sm="33%" *ngFor="let language of languages">
       <mat-card 
        class="mat-elevation-z4" 
        style="height: 60px; border-radius: 8px;"
        (click)="onCardClick(language)"
       >
              <div 
                #i 
                style="float: right; margin-bottom: 1px"
                *ngIf="selectedLanguage === language"
                <!-- 如果用主键判断的话这里改为 *ngIf="language.id === selectedLanguageId" -->
              >
                    <img src="../../assets/Images/Check.svg" alt="选中标识">
              </div>
              <mat-card-content style="text-align: center; margin-top: 23px;">
                  <span style="color: blue; font-weight: 800;
                        letter-spacing: 0.2px;">
                            {{language.content}}
                   </span>
              </mat-card-content>
        </mat-card>
 </div>

实现逻辑说明 #

Angular的*ngFor循环渲染时每一项的language都是独立的引用，点击卡片时将当前项赋值给全局的选中变量，条件渲染时仅匹配到和选中变量一致的卡片才会显示勾选容器，不会影响其他卡片的展示。

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