Изменить цвет фона одной мат-карты в Angular

Question

Это код HTML моего списка карт в моем приложении Angular:

<div [ngClass]="verticalResultsBarStyle">
  <div class="innerDiv">
    <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }" (click)="highlightCard()">
      <mat-card-header>
        <mat-card-title>{{card[0].title}}</mat-card-title>
        <mat-card-subtitle>{{card[0].subtitle}}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>{{card[0].info1}}</p>
        <p>{{card[0].info2}}</p>
        <p>{{card[0].info3}}</p>
        <p>{{card[0].info4}}</p>
        <p>{{card[0].info5}}</p>
      </mat-card-content>
    </mat-card>
    <pagination-controls (pageChange)="OnPaginateChange($event)" id="paginator"></pagination-controls>
  </div>
</div>

Это CSS:

.verticalResultsBarContainerEnabled {

  background-color: #eeeeee;
  width: 16%;
  float: right;
  overflow: visible;

}

.verticalResultsBarContainerDisabled {
  display: none;
}

.card {

  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;

}

.cardHighlight {

  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #c12400;
  color: white;
}

.innerDiv {
  height: 755px;
  overflow: auto;
}

.paginator {
  margin: auto;
  width: 92%;
}

и, наконец, это фрагмент TS:

highlightCard() {
    if (this.barStyle === 'card') {
      this.barStyle = 'cardHighlight';
    } else {
      this.barStyle = 'card';
    }
  }

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

Answer 1

Вам нужно использовать индекс для каждой из ваших карт. Ваша проблема нормальная.

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

Во-первых, в ваших .ts:

service.subscribe(cards => {
let i = 0
cards.forEach(card => {
  this.barStyle[i] = // your default barStyle;
  i++;
});

Если у вас есть идентификатор для каждой машины, лучше, вы можно избежать использования i . затем в шаблоне:

<mat-card [ngClass]="barStyle[i]" *ngFor="let card of obs; let i = index | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }" (click)="highlightCard(i)">

Я вижу, вы используете функцию asyn c в шаблоне. Итак, в TS вы ожидаете и Observable . Чтобы обновить стиль каждой карты, вам необходимо подписаться на услугу и обновить объекты. Итак, нужно внести некоторые изменения:

карты: наблюдаемые станут карты: карта [] ;

loadingData = true;

вызовите службу как:

getData() {
    this.loadingData = true;
    service().subscribe(cards => {
    cards.forEach(card => {
        this.barStyle[card.id] = // your default barStyle;
        this.cards = cards;
        this.loadingData = false; // this is set false only after data is loaded
    });
}

highlightCard(id: number) {
    if (this.barStyle[id] === 'card') {
      this.barStyle[id] = 'cardHighlight';
    } else {
      this.barStyle[id] = 'card';
    }
  }

в шаблоне:

  <mat-card ***ngIf="!loadingData"** 
     [ngClass]="barStyle[card.id]" 
     *ngFor="let card of obs | async | 
        paginate: { id: 'paginator', 
                    itemsPerPage: 10, 
                    currentPage: currentPage, 
                    totalItems: totalItems }" 
     (click)="highlightCard(card.id)">

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

** Чтобы сохранить чистый код, для разбивки на страницы вы можете использовать переменную, инициализированную в .ts *