如何在bootstrap主题项目中显示有角度的材料芯片?

Question

芯片显示

根据上面的图像，我面临的问题是在bootstrap主题项目中显示垫芯片。只有在我点击或点击一些键后，它才会显示为一个完整的芯片。我已经在我的模块中安装了角材料和进口垫芯片。ts文件。mat芯片的代码如下:

<input id="intrest" placeholder="Enter Interest" #interestInput [formControl]="interestCtrl" list="interestList" [matChipInputFor]="chipList [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="addInterests($event)" autocomplete="off" (keypress)="intrestKeyPress($event)"/>
<mat-chip-list #chipList>
<mat-chip style="background-color:#0F52BA; color: white;" *ngFor="let interest of Interests" [selectable]="selectable" [removable]="removable" (removed)="removeInterests(interest)" [(ngModel)]="interest"> {{interest}}
<i class="fa fa-times" matChipRemove *ngIf="removable"></i>
</mat-chip>
</mat-chip-list>

希望有人能在这个问题上帮助我。很多谢谢!

Answer 1

我也面临同样的问题。我认为使用引导芯片更容易。