如何在 Angular mat-table 中放置不同的按钮？

Question

我正在使用 angular mat table 来显示如下所示的数据数组，并进行简单排序。最后一列是一列按钮。我希望在每一行中都有不同的按钮，这些按钮可以路由到不同的组件。

Array as a table

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let device"> {{device.name}} </td>
  </ng-container>

  <!-- SerialNo Column -->
  <ng-container matColumnDef="serialNo">
    <th mat-header-cell *matHeaderCellDef > SerialNo </th>
    <td mat-cell *matCellDef="let device"> {{device.serialNo}} </td>
  </ng-container>

<!-- Button Column -->
  <ng-container matColumnDef="actions">
    <th mat-header-cell  *matHeaderCellDef > Actions </th>
    <td mat-cell *matCellDef="let row" >
      <button mat-button routerLinkActive="list-item-active" routerLink="/device1" >View</button>
    </td>

我的component.ts是这样的

export interface Devices {
  name: string;
  position: number;
  serialNo: number;
}
//An Array of device1
const DEVICES: Devices[] = [
  {position: 1, name: 'Device 1', serialNo: 135421},
  {position: 2, name: 'Device 2', serialNo: 125240},
  {position: 3, name: 'Device 3', serialNo: 124350},
  {position: 4, name: 'Device 4', serialNo: 124500},
  {position: 5, name: 'Device 5', serialNo: 145620},
];

  displayedColumns: string[] = ['position', 'name', 'serialNo', 'actions'];
  dataSource = new MatTableDataSource(DEVICES);

  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

我将如何在使用 routerLink 路由到不同组件的每一行中添加不同的按钮。

Answer 1

您要将每个 link 重定向到不同的 angular 组件还是要将每个 link 重定向到相同的组件angular 组件（例如，设备详细信息 组件），但具有不同的 url 和设备信息（例如重定向到“/device/1”，'device/2' 等..)?

如果是后者，假设您想将每个设备重定向到 angular 路由 '/device-detail/:id'，其中 id设备的识别。为简单起见，假设 id 是 serialNo。所以你只需要改变按钮声明。用routerLink="/device1"代替[routerLink]="['/device-detail', device.serialNo]"（我也把*matCellDef="let row"改成了*matCellDef="let device"）：

<td mat-cell *matCellDef="let device" >
   <button mat-button routerLinkActive="list-item-active" [routerLink]="['/device-detail', device.serialNo]" >View</button>
</td>

如何在 Angular mat-table 中放置不同的按钮？

How to put distinct buttons in Angular mat-table?

arrays

button

angular-material

angular