Angular材料：在mat-chip右侧显示图标

Question

我有一个mat-chip组件，里面有内容，同时也有一个取消图标。我设置了mat-chip组件的固定宽度，所以我希望取消图标始终向右浮动。但是取消图标没有向右浮动。我尝试使用多种CSS技术，但都没有起作用。

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

- indra257

Answer 1

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

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

会起作用的。如果你想充分体验 Angular Material，可以考虑阅读这篇关于 flexbox 的指南（点击此处），因为有很多东西都在使用它。

- k.s.

Answer 2

将图标移动到项目（{{ item.name }}）之前：

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

- Daniela Belc