【问题标题】:How to display angular material chips in bootstrap themed project?如何在引导主题项目中显示角材料芯片?
【发布时间】:2021-10-26 08:30:33
【问题描述】:

Mat chip Display

根据上图,我在引导主题项目中显示垫芯片时遇到问题。它仅在我单击或点击某些键后显示为完整的芯片。我已经在我的 module.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>

希望有人能在这个问题上帮助我。非常感谢!

【问题讨论】:

  • 这里有一个错字:[matChipInputFor]="chipList 你忘记了结束引号。使用带有语法高亮的编辑器来防止这些。
  • 此外,如果没有引发错误,那么您的数据结构很可能不包含您认为它们包含的数据。也许interests[""] 然后图像上的结果是正确的。尝试继续调试,直到您遇到 StackOverflow 可以帮助您解决的特定可解决代码错误。您会发现其中的大部分问题之前都已在此处解决过,并且可以通过快速的 google 为您解决。

标签: angular mat-chip


【解决方案1】:

我遇到了同样的问题。我认为使用引导芯片更容易。

【讨论】:

猜你喜欢
  • 2016-12-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-16
  • 2019-06-15
相关资源
最近更新 更多