Не удается установить значение по умолчанию в материале Multiselect Angular 6

Question

Я пытаюсь реализовать множественный выбор в Angular с использованием Material.

Когда страница открывается в режиме редактирования, некоторые типы должны быть выбраны по умолчанию в 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);
                  });

Здесь соответственно указан правильный тип документа. Например CV.

Утомленная вещь, когда я устанавливаю selectedDocType, как показано ниже, тогда это работает:

this.selectedDocType = ["CV"];

Но это не работает, когда я нажимаю под каждым, как я упоминал выше. Оба они имеют 1 значение в массиве.

Что я делаю не так?

Обновление: формат документа следующий:

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

Answer 1

Спасибо всем за помощь.

Проблема заключалась в назначении ответа, поскольку я назначал ответ непосредственно переменной.

Вместо этого мне пришлось сначала присвоить значение локальной переменной, а затем назначить значение selectedDocType, и это сработало:

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

Таким способом selectedDocType были назначены правильные значения.

Answer 2

Это известная проблема с выбором материала. Он выбирает по объекту ссылка , а не по значению.

• , поэтому он работает только со строками, но не работает с реальными объектами ...

Вы можете довольно легко переопределить это поведение, используя встроенную директиву с именем compareWith

Вот небольшая демонстрация stackblitz для вас, чтобы получить концепцию :

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;
  }
}