Question

这是我的Angular应用程序中垫卡列表的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的摘要：

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++;
});

如果每辆车都有一个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 。要更新每张卡的样式，您需要订阅服务并更新对象。因此，需要进行一些更改：

卡：可观察将变为卡：卡[] ；

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

Somethimes，您的模板将在加载数据之前呈现，因此您需要使用布尔值来等待它。

**要保持代码整洁，可以使用.ts *初始化的变量进行分页。

在Angular中更改单个卡片的背景颜色

1 个答案: