Angular 单击“材质行特定列角度8”

目前，我正在处理材质表，在该表中，当我单击星形图标时，我必须通过单击收藏夹图标（单独的列）将一行设置为收藏夹。这对所有行而不是对单个列进行了更改

我试图根据用户ID申请

这是我的HTML代码

<mat-table [dataSource]="dataSource" matTableExporter matSort class="mat-elevation-z8" #exporter="matTableExporter">
    <ng-container matColumnDef="customColumn">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let dashdata">   
        <span class="icon"  *ngIf="dashdata.status === 'Data Load Pending'">
          <i class="far fa-times-circle"></i>
      </span>
      <span class="icon" (click)="onClick()" *ngIf="dashdata.status === 'Pending' || 
                   dashdata.status === 'Approved' || 
                   dashdata.status === 'No Forecast'">
          <i class="fas fa-star" [ngClass]="{'active': isActive}"></i>
    </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="UserId">
      <mat-header-cell *matHeaderCellDef mat-sort-header> UserId </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.UserId}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="FName">
      <mat-header-cell *matHeaderCellDef mat-sort-header> First Name</mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.FName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Lname">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Lname}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Salary">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Salary </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.Salary}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastUpdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Last Update </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.lastUpdate}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let dashdata">
        <span *ngIf="dashdata.status === 'Pending'">
          <mat-icon> email</mat-icon>
      </span>
      <span class="icon" *ngIf="dashdata.status === 'Approved' || 
                   dashdata.status === 'Not Approved'">
         <mat-icon>edit</mat-icon>
      </span>
      </mat-cell>
    </ng-container>
    <!-- Header row first group -->

    <mat-header-row *matHeaderRowDef="foreCastColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: foreCastColumns;"></mat-row>

  </mat-table>
  <mat-paginator [pageSizeOptions]="[10, 25, 100]" showFirstLastButtons></mat-paginator>

这就是我试图激活行或非激活行的内容

    onClick(){
      this.isActive = !this.isActive;
    }

这是我的SCS

    .fas{
        font-size: large;
    }
    .fas fa-star{
        background-color:blue;
    } 
    .fa-star.active{
        color:grey;
    }  

---

您可以使用函数，该函数将行数据作为参数，并存储

UserId

，而不是

isActive

属性

像这样的

在组件中.ts

favoriteUserId = null;

onClick(row) {
   this.favoriteUserId = row.UserId
}

在模板中

请用这个替换您的跨度块

<span class="icon" (click)="onClick(dashdata)" *ngIf="dashdata.status === 'Pending' || dashdata.status === 'Approved' || dashdata.status === 'No Forecast'">
    <i class="fas fa-star" [ngClass]="{'active': dashdata.UserId === favoriteUserId}"></i>
</span>

---

以上代码部分工作时，当我选择favorite icondid您在此处添加任何代码时，css不会应用。我看不到任何更改请cna您检查示例@Mahadevan我已将

[ngClass]=“{'active'：isActive}”更改为
[ngClass]=“{'active'：dashdata.UserId==favoriteUserId}”
@Mahadevan我无法使用
matColumnDef=“customColumn”
我已将新项目（
options
）添加到
foreCastColumns
数组中，并将
matColumnDef=“customColumn”
更改为
matColumnDef=“options”
<span class="icon" (click)="onClick(dashdata)" *ngIf="dashdata.status === 'Pending' || dashdata.status === 'Approved' || dashdata.status === 'No Forecast'">
    <i class="fas fa-star" [ngClass]="{'active': dashdata.UserId === favoriteUserId}"></i>
</span>

<ng-container matColumnDef="customColumn">
   <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let dashdata">   
        <span class="icon"  *ngIf="dashdata.status === 'Data Load Pending'; else elseBlock">
          <i class="far fa-times-circle"></i>
      </span>
   <ng-template #elseBlock>
     <span class="icon" (click)="onClick(dashdata)">
          <i class="fas fa-star" [ngClass]="{'active': dashdata.UserId === favoriteUserId}"></i>
     </span>
   </ng-template>

  </mat-cell>
</ng-container>