Angular material: 在mat-chip右边显示图标

Question

我有一张垫片，里面有内容。我也有一个取消图标。我将 mat-chip 设置为固定宽度，所以我希望取消图标始终浮动到 right.But 取消图标不浮动到右侧。我尝试了多种 css 技术，但没有任何效果。

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

Answer 1

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

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

会成功的。 consider this guide 如果您想充分体验 angular material，请进入 flexbox，因为有很多东西都在使用它。

Answer 2

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

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

Angular material: displaying icons to the right of mat-chip