我正在尝试创建一个具有动态数量的mat-autocomplete
字段的简单表单。但是,在某些情况下,输入的显示值会丢失。
组件的脚本
export class AutocompleteSimpleExample {
availableItems = [{name: 'item1'}, {name: 'item2'}];
items = [{name: 'item1'}, {}];
addItem() {
this.items.push({});
}
deleteItem(i: number) {
this.items.splice(i, 1);
}
displayObject(obj) {
return obj ? obj.name : null;
}
}
组件视图
<form>
<mat-form-field *ngFor="let item of items; let i = index">
<input matInput [(ngModel)]="items[i]" [matAutocomplete]="itemAutocomplete" name="items[{{i}}]">
<mat-autocomplete #itemAutocomplete="matAutocomplete" [displayWith]="displayObject">
<mat-option *ngFor="let item of availableItems" [value]="item">{{item.name}}</mat-option>
</mat-autocomplete>
<button mat-button mat-icon-button matSuffix type="button" (click)="deleteItem(i)"><mat-icon>close</mat-icon></button>
</mat-form-field>
<button class="btnType01" mat-raised-button type="button" (click)="addItem()"><mat-icon>add</mat-icon>Add Item</button>
</form>
我做了一个 StackBlitz 来展示这个问题。如果你:
- 在第二个自动完成字段中选择一个项目(例如
Item 2
)- 从第一个自动完成字段中删除项目(使用字段
x
末尾的)- 点击
Add Item
添加另一个然后,第一个自动完成字段将显示一个空值,而不是保留原来的值。
谁能帮我弄清楚为什么价值会丢失?这是处理动态数量的自动完成字段的错误方法吗?