我试图用可选择和可移动的选项实现角度垫片。但问题是占位符在加载时移动到顶部。我不确定我在代码上做了什么错。请有人帮我解决这个问题。
在
下添加了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);
}
}
我使用了相同的代码,这些代码在材料文档上给出,但只有改变我完成而不是加载数组值我在时间加载时传递空数组。请有人帮我解决这个问题
答案 0 :(得分:6)
是ts文件中关键字拼写的问题。你已将其定义为
keyowords = [];
您在html文件中引用的名称是关键字。将ts文件中的名称更改为
keywords = [];
这是有效的stackblitz代码: - https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html
答案 1 :(得分:0)
我将Angular从4.4.X更新到最新的5.2.2。问题得到解决。似乎是Angular Bug。