我正在尝试使用Material在Angular中实现多选。
在编辑模式下打开页面时,应在Multiselect中选择某些类型作为默认值,但在我的情况下它不起作用。
以下是HTML:
<mat-form-field >
<mat-select placeholder="DocTypes" [(value)]="selectedDocType" formControlName="docTypes" multiple>
<mat-option *ngFor="let doc of docs" [value]="doc.name">{{doc.name}}</mat-option>
</mat-select>
</mat-form-field>
我正在填写SelectedDocType如下:
selectedDocType: string[] = new Array();
resp.forEach(x => {
this.selectedDocType.push(x.name);
});
这里resp包含正确的doc类型。例如CV。
奇怪的是,当我将所选的DocType设置为如下时,它可以工作:
this.selectedDocType = ["CV"];
但是,当我按照上面提到的那样推动每一个时,它不起作用。它们都在数组中有1个值。
我究竟做错了什么?
更新:Doc格式如下:
export interface DocTypes{
id: string;
name: string;
}
问题是材料选择的已知问题。它按对象引用而不是按值选择。
您可以使用名为compareWith的内置指令轻松覆盖该行为
这是一个小stackblitz demo for you to get the concept:
HTML:
<mat-form-field>
<mat-select multiple [(ngModel)]="selectedObjects" [compareWith]="comparer">
<mat-option *ngFor="let iobject of allObjects" [value]="iobject">{{iobject.name}}</mat-option>
</mat-select>
</mat-form-field>
零件:
interface obj {
name: string,
value: number
}
@Component({
selector: 'select-multiple-example'
})
export class SelectMultipleExample {
selectedObjects : obj[];
allObjects : obj[] = [
{name: 'AAA', value: 1},
{name: 'BBB', value: 2},
{name: 'CCC', value: 3}
];
ngOnInit() {
// define default selection
this.selectedObjects = [{name: 'AAA', value: 99}, {name: 'CCC', value: 99}];
}
comparer(o1: obj, o2: obj): boolean {
// if possible compare by object's name property - and not by reference.
return o1 && o2 ? o1.name === o2.name : o2 === o2;
}
}
谢谢大家的帮助。
问题在于响应的分配,因为我直接将响应分配给变量。
而不是那样,我必须首先将值分配给局部变量,然后我将值分配给selectedDocType并且它工作:
name: [];
for (var i = 0; i < resp.length; i++) {
name[i] = resp[i].id;
}
this.selectedDocType = name;
这种方式为selectedDocType分配了所需的正确值。