#angular #mat-chip
Вопрос:
Основываясь на изображении выше, я столкнулся с проблемами отображения чипов в тематическом проекте bootstrap. Он отображается в виде полного чипа только после того, как я нажму или нажму на некоторые клавиши. Я установил угловой материал и импортировал чип mat в свой файл module.ts. Код для чипа mat выглядит следующим образом:
lt;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)"/gt; lt;mat-chip-list #chipListgt; lt;mat-chip style="background-color:#0F52BA; color: white;" *ngFor="let interest of Interests" [selectable]="selectable" [removable]="removable" (removed)="removeInterests(interest)" [(ngModel)]="interest"gt; {{interest}} lt;i class="fa fa-times" matChipRemove *ngIf="removable"gt;lt;/igt; lt;/mat-chipgt; lt;/mat-chip-listgt; Надеюсь, кто-нибудь сможет мне помочь в этом вопросе. Большое спасибо!
Комментарии:
1. Здесь есть опечатка:
[matChipInputFor]="chipListвы забыли заключительные кавычки. Используйте редактор с подсветкой синтаксиса, чтобы предотвратить это.2. Кроме того, если ошибок не возникло, то, скорее всего, ваши структуры данных не содержат данных, которые, по вашему мнению, они содержат. Возможно
interests, так и есть[""], и тогда результат на изображении будет правильным. Попробуйте продолжить отладку до тех пор, пока у вас не появится конкретная разрешимая ошибка кода, с которой StackOverflow может вам помочь. Большинство из них, которые вы найдете, были решены здесь раньше, и быстрый поиск в Google поможет вам разобраться.