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

Posted 2023-03-13

【中文标题】如何访问 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?

【发布时间】：2021-06-01 02:23:21

【问题描述】：

我有一个四列的 Angular 材料数据表。每行的最后一个单元格是一个带有单击功能的按钮。我想使用我的第一个单元格（“名称”）的值作为附加到相应最后一个单元格中的按钮的函数中的参数。这如何实现？

目前 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>

【问题讨论】：

如果您提供了minimal reproducible example，则更容易查看问题您可以在stackblitz 设置一个。

你是说restart()函数

【参考方案1】：

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

改变这个：

<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

【讨论】：

太棒了。奇迹般有效。我只在 ts 中将 restart(powershell) 更改为 restart(powershell: any) ，因为它抛出了“隐式具有'任何'类型”错误。谢谢

【参考方案2】：

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

这样你可以试试

据我所知，

powershell.Name 无法在 之外访问。

你从哪里得到powershell