根据点击方法在行 Angular Material Table 中动态应用 CSS 样式

Question

感谢您的支持。目前我正在努力解决一些问题。所以，我正在尝试将动态行制作成 Angular Mat Table。在标签和输入之间产生 toogle 效果。我的目标是从特定行更新和删除数据。

我快完成了，但是当我单击按钮时，所有行都会受到影响。我用索引尝试了一些逻辑，我还使用了“数据属性”（[attr.data-example]），并且我尝试了 ng-class。让我用图片解释，我也会附上我的代码。

HTML:

<div class="example-table-container">

      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 tbl-header">
        <!-- Position Column -->
        <ng-container matColumnDef="usr_id">
          <th mat-header-cell *matHeaderCellDef> Usr ID </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="user">
          <th mat-header-cell *matHeaderCellDef> Usuario </th>
          <td mat-cell *matCellDef="let element">
            <span *ngIf="!isVisible">{{element.username}} </span>
            <input type="text" [ngClass]="{'eye-unselec': !isVisible, 'eye-selec': isVisible }" class="form-control"
              [(ngModel)]="editName" *ngIf="isVisible" />
          </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="rol">
          <th mat-header-cell *matHeaderCellDef> Rol </th>
          <td mat-cell *matCellDef="let element">
            <span *ngIf="!isVisible">{{element.rol}} </span>
            <input type="text" [ngClass]="{'eye-unselec': !isVisible, 'eye-selec': isVisible }" class="form-control"
              [(ngModel)]="editRol" *ngIf="isVisible" />
          </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="create_date">
          <th mat-header-cell *matHeaderCellDef> Fecha Alta </th>
          <td mat-cell *matCellDef="let element"> {{element.creationDate}} </td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef> Estatus </th>
          <td mat-cell *matCellDef="let element">
            <span *ngIf="!isVisible">{{element.status}}</span>
            <input type="text" [ngClass]="{'eye-unselec': !isVisible, 'eye-selec': isVisible }" class="form-control"
              [(ngModel)]="editStatus" *ngIf="isVisible" />
          </td>
        </ng-container>

        <ng-container matColumnDef="operaci">
          <th mat-header-cell *matHeaderCellDef> Operaciones </th>
          <td mat-cell *matCellDef="let element; let i = index">
            <button type="button" class="btn btn-primary sns-btn edit" (click)="edit(element,i);isVisible=!isVisible">
              <fa-icon [icon]="editIcon" size="1x"></fa-icon>
            </button>
          </td>
        </ng-container>

        <ng-container matColumnDef="operaci2">
          <th mat-header-cell *matHeaderCellDef> </th>
          <td mat-cell *matCellDef="let element">
            <button type="button" class="btn btn-primary sns-btn edit" (click)="delete()">
              <fa-icon [icon]="delIcon" size="1x"></fa-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr [attr.row_status]="row.id |json" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
        </tr>
      </table>
    </div>

COMPONENT.TS

public edit(element, i) {
 //if the inputs of each row of table are still blank, return to labels is allowed
 //this.isVisible = true; //show inputs

 if (this.editRol || this.editName || this.editStatus) {
   this.isVisible = false;
 }
 console.log(" index value " + i + "element " + JSON.stringify(element));
}

.eye-unselec{
  display: none;
}

.eye-selec {
  display: inline;
}

这是一个例子，但我有不同的东西。

这里是a link

图像：

Answer 1

只需使用布尔数组而不是布尔值，并使用您已有的索引作为编辑函数的参数：

app.component.ts

isVisible : boolean[] = [false, false, false, false];

editDomain(index){
    this.isVisible[index] = true;
  }

app.component.html

<input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="isVisible[i]"/>

<button class="btn btn-primary" (click)="editDomain(i)">Edit</button>

根据点击方法在行 Angular Material Table 中动态应用 CSS 样式

Apply CSS style dynamically in row Angular Material Table, based on click method

css

angular

angular-material

angular8