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

Posted 2023-02-27

【中文标题】为 HTML 中的每一行添加删除和更新按钮

【英文标题】：Add Delete and Update Button for each row in HTML

【发布时间】：2021-03-12 02:52:22

【问题描述】：

我有一个像这样显示一些值的 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);
      );
    

  

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

编辑：

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

【问题讨论】：

您可以将这些操作按钮放在一个单独的组件中，并将其循环到您想要的任何地方。

@AhamedSafnaj 你能指导我如何做到这一点吗？我是前端部分的新手，我尝试的一切都失败了。

【参考方案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>

【讨论】：

如何增加这些列之间的间距？列现在紧密间隔。添加照片

一个垫表，按缺陷分布列。您可以将style.min-width 添加到一列以提供最小宽度，或者为“td”添加边距或填充

谢谢。你能帮忙添加一个搜索按钮吗？我必须像上面的示例图片一样根据客户 ID 进行搜索。