如何将编辑图标和数据放置在Mat表的一个<td>中

问题描述

我是Angular的新手。这是我的主表（其线框）

当我单击铅笔图标时，它应如下所示：

但是我没有得到这样的输出。我已经尝试过了

stackblitz网址：https://stackblitz.com/edit/mat-table-custom-dtb5bv?file=index.html

面临的问题： 下拉菜单位于更新按钮的右侧

解决方法

似乎菜单上有width: 100%;。这会使按钮移至下一行。因此，要将两者放在同一行中，请尝试添加以下内容。

.mat-cell .mat-select {
     width: auto;         
     min-width: 100px; /*adjust accordingly*/
}

,

有必要对CSS和HTML进行一些调整。有必要进行进一步的调整，但这是一个初步的想法。

HTML

<span *ngIf="!element.isSelected; else editPlace">
                    {{element.value}}
</span>
<button mat-icon-button aria-label="Toggle star" *ngIf="i!==2 && !element.isSelected"
        (click)="editSetting(element)"
        style="color: blue">
    <mat-icon class="material-icons">edit</mat-icon>
</button>

<ng-template #editPlace>
    <div class="editPlace">
        <mat-select>
            <mat-option *ngFor="let value of dropDownValues">
                {{value.name}}
            </mat-option>
        </mat-select>
    <button mat-raised-button color="accent" class="submit-button" *ngIf="element.isSelected" (click)="update(element)">Update</button>
    </div>
</ng-template>
<ng-container *ngIf="i===2">
    <mat-slide-toggle></mat-slide-toggle>
</ng-container>

CSS

.editPlace {
  display: flex;
}

.editPlace > * {
  margin-right: 10px;
}

.mat-select {
  border: 1px solid #666666;
  border-radius: 5px;
  width: 10em;
}