Angular 4材料芯片占位符不能正常工作
发布时间:2020-12-17 07:26:26 所属栏目:安全 来源:网络整理
导读:我试图用可选择和可移动的选项实现角度垫片.但问题是占位符在加载时移动到顶部.我不确定我在代码上做了什么错.请有人帮我解决这个问题. 在下面添加了GIF 我的代码是 mat-form-field mat-chip-list #chipList mat-chip *ngFor="let keyword of keywords" [sel
我试图用可选择和可移动的选项实现角度垫片.但问题是占位符在加载时移动到顶部.我不确定我在代码上做了什么错.请有人帮我解决这个问题.
在下面添加了GIF
<mat-form-field> <mat-chip-list #chipList> <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable" [removable]="removable" (remove)="remove(keyword)"> {{keyword}} <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> </mat-chip> <input placeholder="Keywords" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)" /> </mat-chip-list> </mat-form-field> 和ts是 visible: boolean = true; selectable: boolean = true; removable: boolean = true; addOnBlur: boolean = true; separatorKeysCodes = [ENTER,COMMA]; keywords= []; // At time load i need this to be empty public add(event: MatChipInputEvent): void { let input = event.input; let value = event.value; if ((value || '').trim()) { this.keywords.push(value.trim()); } if (input) { input.value = ''; } } public remove(keyword: any): void { let index = this.keywords.indexOf(keyword); if (index >= 0) { this.keywords.splice(index,1); } } 我使用了相同的代码,这些代码在材料文档上给出,但只有改变我完成的是代替加载数组值我在时间加载时传递空数组.请有人帮我解决这个问题
这是ts文件中关键字拼写的问题.你把它定义为
keyowords = []; 您在html文件中引用的名称是关键字.将ts文件中的名称更改为 keywords = []; 这是相同的stackblitz代码: – https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |