时间戳

首页 > 解决方案 > How do I get a button used on multiple card containers to only affect one container at a time?

html - How do I get a button used on multiple card containers to only affect one container at a time?

问题描述

I am currently working on a web application using angular and angular material. The page in question holds several profiles each with a button that when clicked removes the information currently showing and replaces it with the rest of the profile information. The issue is that when I click this button on one profile it does this information flip on all the profiles at once. I need help figuring out how to have the button only affect the profile it is associated with.

I am still relatively new to coding, so I've mainly been doing research on advice on how to approach this particular situation, but nothing I've found so far has worked. 

  <mat-card class="bpBuddyCont" *ngFor= "let profile of profileList">
    <div>
      <ul class="bpBuddies">
        <li class="li2">
          <div *ngIf="!showHiddenInfo">
            <mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
            <mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
            <mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
          </div>
              <div class="column4" *ngIf="showHiddenInfo">
                <span class="details4">Additional Notes: </span>
                <span class="details3">{{profile.additionalNotes}}</span>
              </div>
            </div>
          <button mat-button color="primary" class="btn" (click)="showHiddenInfo = !showHiddenInfo">{{showHiddenInfo ? 'Back' : 'More...'}}</button>
        </li>
      </ul>
    </div>
  </mat-card>

标签： htmlangulartypescriptangular-material

解决方案

您可以为每个对象使用一个布尔变量来执行此操作，profile.isExpanded单击时将其更改为：

(click)="profile.isExpanded = !profile.isExpanded"

HTML 代码：

<mat-card class="bpBuddyCont" *ngFor="let profile of profileList">
    <div>
        <ul class="bpBuddies">
            <li class="li2">
                <div *ngIf="!profile.isExpanded">
                    <mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
                    <mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
                    <mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
                </div>
                <div class="column4" *ngIf="profile.isExpanded">
                    <span class="details4">Additional Notes: </span>
                <span class="details3">{{profile.additionalNotes}}</span>
              </div>
          <button mat-button color="primary" class="btn" (click)="profile.isExpanded = !profile.isExpanded">{{profile.isExpanded ? 'Back' : 'More...'}}</button>
        </li>
      </ul>
    </div>
  </mat-card>

TS 文件没有变化。

WORKING STACKBLITZ

推荐阅读