如何访问 Angular Material Data-Table 中同一行的不同单元格中的单元格值？

Question

我有一个包含四列的 Angular Material 数据 Table。每行的最后一个单元格是一个带有点击功能的按钮。我想将我的第一个单元格（“名称”）的值用作函数中的参数，该函数附加到对应的最后一个单元格中的按钮。如何实现？

目前 restart() 还没有参数，但我想添加一个以将其传递给我的 api。

table.component.ts

    import { Component, OnInit } from '@angular/core';
    import { PowershellService } from 'src/app/services/powershell.service';
    import { Observable } from 'rxjs';
    import { DataSource } from '@angular/cdk/collections';
    import { powershell } from 'src/app/models/powershell.model';
    import { MatSnackBar } from '@angular/material/snack-bar';
    
    @Component({
      selector: 'app-apps-table',
      templateUrl: './apps-table.component.html',
      styleUrls: ['./apps-table.component.scss']
    })
    export class AppsTableComponent implements OnInit {
    
      dataSource = new PowerShellDataSource(this.powershellService);
      displayedColumns = ['Name', 'Description', 'Status', 'options'];
    
      constructor(private powershellService: PowershellService,
        private snackBar: MatSnackBar) { }
    
      ngOnInit() {
      }
    
      
      restart() {
        this.powershellService.getRestart()
          .subscribe((data) => {
            this.snackBar.open(data, 'Close', {
              duration: 4000,
              panelClass: ['snackbar']
            });
          },
            (error) => {
              console.log(error);
              this.snackBar.open(error, 'Close', {
                duration: 4000,
                panelClass: ['snackbar']
              });
            });
            
      }
    
    }
    
    
    export class PowerShellDataSource extends DataSource<any> {
    
      constructor(private powershellService: PowershellService) {
        super();
      }
    
      connect(): Observable<powershell[]> {
        return this.powershellService.getPowershellApps();
      }
    
      disconnect() { };
}

table.component.html

    <div>
        <mat-table [dataSource]="dataSource" class="mat-elevation-z3">
    
            <ng-container matColumnDef="Name">
                <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
                <mat-cell *matCellDef="let powershell">{{powershell.Name}}</mat-cell>
            </ng-container>
    
            <ng-container matColumnDef="Description">
                <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
                <mat-cell *matCellDef="let powershell">{{powershell.Description}}</mat-cell>
            </ng-container>
    
            <ng-container matColumnDef="Status">
                <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
                <ng-container *matCellDef="let powershell">
                    <mat-cell [ngSwitch]="powershell.Status">
                        <ng-container *ngSwitchCase="'Running'">
                            <mat-chip-list>
                                <mat-chip class="running" selected>Running</mat-chip>
                            </mat-chip-list>
                        </ng-container>
                        <ng-container *ngSwitchCase="'Stopped'">
                            <mat-chip-list>
                                <mat-chip class="stopped" selected>Stopped</mat-chip>
                            </mat-chip-list>
                        </ng-container>
                        <ng-container *ngSwitchDefault>
                            <mat-chip-list>
                                <mat-chip>{{powershell.Status}}</mat-chip>
                            </mat-chip-list>
                        </ng-container>
                    </mat-cell>
                </ng-container>
            </ng-container>
    
            <ng-container matColumnDef="options">
                <mat-header-cell *matHeaderCellDef>Options</mat-header-cell>
                <mat-cell *matCellDef="let powershell">
                    <button mat-icon-button [matMenuTriggerFor]="appMenu">
                        <mat-icon>desktop_mac</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>
    
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></mat-row>
    
        </mat-table>
    </div>

<mat-menu #appMenu="matMenu">
    <button mat-menu-item (click)="restart()">Restart</button>
</mat-menu>

Answer 1

<mat-menu #appMenu="matMenu">
    <button mat-menu-item (click)="restart(powershell.Name)">Restart</button>
</mat-menu>

像这样你可以试试

Answer 2

可以像这样将数据传递到菜单：

改变这个：

<button mat-icon-button [matMenuTriggerFor]="appMenu">

为此：（使用 matMenuTriggerData 我们传递上下文数据）

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{ps: powershell}>

然后将您的 mat-menu 更改为：

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent let-ps="ps">
    <button mat-menu-item (click)="restart(ps)">Restart</button>
  </ng-template>
</mat-menu>

请注意 matMenuContent，您可以在其中使用 let- 模板输入变量。

在 TS 端，您可以访问整行 (powershell) 字段（任何单元格）：

  restart(powershell) {
    alert('restart: ' + JSON.stringify(powershell));
  }

console.log(powershell.Name);

查看相关 Angular Material 文档 here

和

工作Stackblitz

如何访问 Angular Material Data-Table 中同一行的不同单元格中的单元格值？

How can you access the value of a cell in different cell of the same row in Angular Material Data-Table?

typescript

angular-material

angular

angular-material-table