关于angular：需要通过colspan或任何合适的方法在材料表中添加注释部分

Need to add a comment section in material table by making a colspan or any suitable approach

我正在尝试在物料表中添加一个colspan，我具有该表的以下代码。

该表的html代码如下，其中我需要一个部分，用于在单击按钮时为每一行添加注释，如图所示。

Table.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element">

{{element.name}}

</td>
</ng-container>

<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
<button *ngIf="!isEdited" mat-raised-button color="primary" (click)="onEdit()">Edit</button> </th>
<td mat-cell *matCellDef="let element">
<button *ngIf="isEdited" mat-mini-fab class="add-btn" matTooltip="Add comment" color="primary">+</button>
<button *ngIf="isEdited" mat-mini-fab class="add-btn" color="warn">-</button>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

<button mat-raised-button matTooltip="Add comment" (click)="onCancel()">Cancel</button>
<button mat-raised-button color="primary" (click)="onEdit()">Save</button>

Table.component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','actions'];
isEdited:boolean;

dataSource =[
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
];

constructor() { }

ngOnInit() {
}

onEdit(){
this.isEdited = true;
}

onCancel(){
this.isEdited = false;
}
}

enter