我是Angular的新手。这是我的主表(它的线框图)

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

但我不会像这样得到输出。我已经试过了
stackblitz url:https://stackblitz.com/edit/mat-table-custom-dtb5bv?file=index.html
面临的问题:下拉列表位于更新按钮的右侧
发布于 2020-09-25 00:05:07
对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;
}https://stackoverflow.com/questions/64049509
复制相似问题