Angular 材质：在 mat-chip 右侧显示图标答案

【问题标题】：Angular material: displaying icons to the right of mat-chipAngular 材质：在 mat-chip 右侧显示图标
【发布时间】：2018-07-18 21:02:20
【问题描述】：

我有一个垫子，里面有内容。我还有一个取消图标。我将 mat-chip 设置为固定宽度，因此我希望取消图标始终向右浮动。但取消图标不会向右浮动。我尝试了多种 css 技术，但没有任何效果。

<mat-chip *ngIf= "item?.name">
   {{ item.name}}
   <mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>

【问题讨论】：

【解决方案1】：

mat-chip 具有 display: inline-flex 作为属性，因此您需要使用与 flex 相关的属性来操作子元素。对于您的情况：

mat-chip {
  justify-content: space-between;
}

会成功的。 consider this guide 进入 flexbox，如果你想充分体验角度材质，因为有很多东西都在使用它。

【讨论】：

【解决方案2】：

将图标移到项目前 ({{ item.name}})：

<mat-chip *ngIf= "item?.name">
   <mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
   {{ item.name}}
</mat-chip>

【讨论】：