如何访问Angular Material Data-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,{
                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>

解决方法

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

改变这个：

<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

,

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

这样的你可以试试