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

【问题标题】：How can i place edit icon and data in one <td> in mat table如何将编辑图标和数据放在垫表中的一个 <td> 中
【发布时间】：2021-01-10 22:15:04
【问题描述】：

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

当我点击铅笔图标时，它应该是这样的：

但我没有得到这样的输出。这个我试过了

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

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

【问题讨论】：

请提供一个最小的、可重现的代码示例。
@Laif 我附上了 stackblitz 网址。请检查。那里只有一张桌子

标签： html css angular angular-material angular6

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

需要对 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;
}

【讨论】：