为 HTML 中的每一行添加删除和更新按钮

Question

我有一个像这样显示一些值的 HTML 页面：

HTML 文件是：

<h1 mat-dialog-title color="primary">
    MXK License Details
</h1>
<mat-dialog-content>
    <div class="generate-full-width example-container mat-elevation-z8">
        <!---->
        <table mat-table [dataSource]="mxkLicenses">
    
            <ng-container matColumnDef="Hardware Key">
                    <th mat-header-cell *matHeaderCellDef class="customtd" style="font-weight: bold;" style="font-size:15px;"><strong> Hardware Key </strong></th>
                    <td mat-cell *matCellDef="let element" class="customtd"> <textarea rows="2" cols="20" wrap="hard">{{element.hardwareKey}}</textarea> </td>
            </ng-container>

            <ng-container matColumnDef="MXK IP Address">
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-weight: bold;" style="font-size:15px;"><strong> MXK IP Address </strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> {{element.mxkIpAddress}} </td>
            </ng-container>
    
            <ng-container matColumnDef="MXK License Key">
                    <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;"><strong> MXK License Key </strong></th>
                    <td mat-cell *matCellDef="let element"> <textarea rows="2" cols="20" wrap="hard">{{element.mxkLicenseKey}}</textarea> </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-button mat-raised-button mat-dialog-close cdkFocusInitial color="warn">Close</button>
    </mat-dialog-actions>

我想在每一行前面添加删除和更新按钮，如下所示：

布局必须与第一张图片相同。我尝试添加按钮，但它们靠近关闭按钮本身。以下是来自 component.ts 的代码：

@Component({
  selector: 'mxk-licenses-list-dialog',
  templateUrl: 'mxk-licenses-list-dialog.html',
})

export class mxkLicensesListDialog implements OnInit {
  mxkLicenses : any;
  displayedColumns: string[] = ['Hardware Key', 'MXK IP Address', 'MXK License Key'];
  constructor(
    public dialogRef: MatDialogRef<AddProductDialog>,
    private generateLicenseService: GeneratelicenseService,
    @Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    console.log("before the call : "+this.mxkLicenses);
    if(this.mxkLicenses === undefined) {
      this.generateLicenseService.getMxkLicenses()
      .subscribe((data) => {
        this.mxkLicenses = data;
        console.log("after the call : "+this.mxkLicenses);
      });
    }

  }
}

我被困在这个问题上好几天了。我也想添加总条目和页码以及搜索按钮，但布局必须是旧的。请帮忙。

编辑：

添加图片以显示间距问题。

Answer 1

它只是添加一个新列。

你的 displayColumns 喜欢

//see that you add a new column "actions"
displayedColumns:['hardwareKey','mxkIpAddress','mxkLicenseKey','actions']

并添加

    <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;"><strong>Actions</strong></th>
        <td mat-cell *matCellDef="let element;let i=index">
          <button type="button" style="margin-left:2px" (click)="delete(element,i)">Delete</button>
          <button type="button" style="margin-left:2px" (click)="update(element,i)">Update</button>
          <button type="button" (click)="copyLicenceKey(element,i)">copyLicenceKey</button>
        </td>
    </ng-container>