无法在 Material 多选 Angular 6 中设置默认值

Question

我正在尝试使用 Material 在 Angular 中实现多选。

当页面在编辑模式下打开时，某些类型应该在多选中被选择为默认类型，但在我的情况下它不起作用。

下面是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 包含正确的文档类型。例如简历。

奇怪的是，当我如下设置 selectedDocType 时它起作用了：

this.selectedDocType = ["CV"];

但是当我像上面提到的那样在 for each 下按下时它不起作用。它们在数组中都有 1 个值。

我做错了什么？

更新：文档格式如下：

export interface DocTypes{
  id: string;
  name: string;
}

Answer 1

此问题是 material select 的一个已知问题。它 select 按对象引用而不是按值。

这就是为什么它只适用于字符串但不能适用于实际对象的原因...

您可以使用内置输入很容易地覆盖该行为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;
  }
}

Answer 2

谢谢大家的帮助。

问题出在响应的分配上，因为我将响应直接分配给变量。

取而代之的是，我必须先将该值分配给一个局部变量，然后将该值分配给 selectedDocType 并且它起作用了：

name: [];
 for (var i = 0; i < resp.length; i++) {
                name[i] = resp[i].id;
              }
this.selectedDocType = name;

通过这种方式为 selectedDocType 分配了所需的正确值。

无法在 Material 多选 Angular 6 中设置默认值

Not able to set default value in Material Multiselect Angular 6

multi-select

angular-material

angular