Как получить кнопку, которая используется в нескольких контейнерах для карточек, чтобы одновременно воздействовать только на один контейнер?

Question

В настоящее время я работаю над веб-приложением, использующим угловой и угловой материал.На рассматриваемой странице содержится несколько профилей, каждый из которых имеет кнопку, которая при нажатии удаляет отображаемую в данный момент информацию и заменяет ее остальной информацией профиля.Проблема в том, что когда я нажимаю эту кнопку на одном профиле, эта информация переключается на все профили одновременно.Мне нужна помощь, чтобы понять, как кнопка влияет только на профиль, с которым она связана.

Я все еще относительно новичок в кодировании, поэтому я в основном изучал советы о том, как подходить к этой конкретной ситуации, но ничего, что я нашел до сих пор, не сработало.

  <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>

Answer 1

Вы можете сделать это, используя одну логическую переменную для каждого объекта, например 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

Answer 2

Вы можете расширить объект профиля с помощью profile.showHiddenInfo и изначально установить его в значение false.

Для этого в вашем js (наиболее вероятно, в файле компонента) после получения profileList,

  profileList.forEach((profile, index) => {
         angular.extend(profile, {showHiddenInfo: false});
         //not sure about this angular.extend but you need to extend your object here
  });

Теперь, когда кнопка нажата, замените showHiddenInfo, то есть

profile.showHiddenInfo = !profile.showHiddenInfo;

И замените

*ngIf="showHiddenInfo"

на

*ngIf="profile.showHiddenInfo"