在 Angular 中更改单个垫卡的背景颜色答案

【问题标题】：Change background color of a single mat-card in Angular在 Angular 中更改单个垫卡的背景颜色
【发布时间】：2020-06-12 09:00:00
【问题描述】：

这是我在 Angular 应用程序中的 mat-card 列表的 HTML 代码：

<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 的 sn-p ：

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

我会单击一张垫子卡并仅突出显示选定的垫子卡，但是当我单击一张卡时，整个列表会改变颜色。我该如何解决？

【问题讨论】：

标签： css angular typescript frontend

【解决方案1】：

您需要为每张卡片使用索引。你的问题是正常的。

我知道 barStyle 是您所有卡片的通用方法。当您的卡片来自后端时，您需要为每张卡片更新 barStyle。

首先，在您的 .ts 中：

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

如果您对每辆车都有一个 id，最好避免使用 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)">

我看到你在模板中使用异步函数。所以，在 ts 中，你期望和 Observable。要更新每张卡片的样式，您需要在您的服务中订阅并更新对象。所以，需要做一些改变：

cards: Observable 将变为 cards: Card[];

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 中初始化的变量进行分页*

【讨论】：