我有一个mat-chip组件,里面有内容,同时也有一个取消图标。我设置了mat-chip组件的固定宽度,所以我希望取消图标始终向右浮动。但是取消图标没有向右浮动。我尝试使用多种CSS技术,但都没有起作用。
<mat-chip *ngIf= "item?.name">
{{ item.name}}
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>
我有一个mat-chip组件,里面有内容,同时也有一个取消图标。我设置了mat-chip组件的固定宽度,所以我希望取消图标始终向右浮动。但是取消图标没有向右浮动。我尝试使用多种CSS技术,但都没有起作用。
<mat-chip *ngIf= "item?.name">
{{ item.name}}
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>
在 mat-chip
中,它具有属性 display: inline-flex
,因此您需要使用与 flex 相关的属性来操作子元素。针对您的情况:
mat-chip {
justify-content: space-between;
}
会起作用的。如果你想充分体验 Angular Material,可以考虑阅读这篇关于 flexbox 的指南(点击此处),因为有很多东西都在使用它。
将图标移动到项目({{ item.name }}
)之前:
<mat-chip *ngIf= "item?.name">
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
{{ item.name}}
</mat-chip>