Предварительный выбор нескольких значений для mat-select - Angular 6

Question

Я пытаюсь предварительно выбрать несколько опций в циновке.Пока я не могу этого достичь.

Вот HTML-файл:

<mat-dialog-content [formGroup]="form">
   <mat-form-field>
     <mat-select placeholder="participants" formControlName="participants"  multiple>
         <mat-option *ngFor="let participant of participants" [value]="participant">{{participant}}</mat-option>
     </mat-select>
    </mat-form-field>
</mat-dialog-content>

Вот контроллер:

export class EventViewModalComponent implements OnInit {
  form: FormGroup;
  calendarEvent: CalendarEvent;
  participants = [];

  constructor(private fb: FormBuilder,
    private participantService: ParticipantService,
    @Inject(MAT_DIALOG_DATA) event: CalendarEvent) 
    { 
    this.form = fb.group({
      title: [event.title, Validators.required],
      location: [event.meta.location, Validators.required],
      description: [event.meta.description, Validators.required],
      start: [event.start, Validators.required],
      end: [event.end, Validators.required],
      participants: [this.participants, Validators.required]
    });
    this.calendarEvent = event;
  }

  ngOnInit() {
    this.participantService.getAll().subscribe(data =>{
      for(let i = 0; i < data['length']; i++){
        this.participants.push(data[i]['name']);
      }
    })
  }
}

В данный момент выбираются всезначения по умолчанию.Вот скриншот того, как это выглядит в настоящее время:

Я пытаюсь добиться того, чтобы только Синди и Джим были предварительно выбраны так:

Как этого добиться?Я прочитал несколько вопросов SO и не удалось.Любая помощь приветствуется

Answer 1

В Angular6 + появляется предупреждение об устаревании, когда у вас есть и formControl, и [(ngModel)]

Похоже, вы используете ngModel в том же поле формы, что и formControl.Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.

Опция 1 с использованием [ngModel] без FormControl

Как следует из первого ответа, разделите [ngModel] и (ngModelChange) следующим образом.

<mat-select 
  [ngModel]="selectedFoods" 
  (ngModelChange)="selectedFoods" 
  placeholder="Favorite food" multiple>
  <mat-option *ngFor="let food of allfoods" [value]="food.value">
      {{food.viewValue}}
  </mat-option>
</mat-select>

И для ts.

  allfoods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
    {value: 'pasta-3', viewValue: 'Pasta'}
  ];
  selectedFoods = [
     'steak-0', 'pasta-3'
  ];

https://stackblitz.com/edit/angular-mat-select-with-ngmodel?embed=1&file=app/select-overview-example.ts

Вариант 2 с использованием [formControl] без [ngModel]

<mat-form-field>
    <mat-select [formControl]="foodForm" placeholder="Favorite food" multiple>
        <mat-option *ngFor="let food of allfoods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

В этом случае выборка инициализируется в конструкторе FormControl.

 allfoods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
    {value: 'pasta-3', viewValue: 'Pasta'}
    ];
 myselectedFoods = ['pasta-3', 'steak-0'];
 foodForm: FormControl = new FormControl(this.myselectedFoods);

https://stackblitz.com/edit/angular-mat-select-multi-with-formcontrol

Answer 2

Я считаю, что самый простой способ - использовать директиву [(ngModel)] (или одностороннюю привязку, о которой я расскажу чуть позже), чтобы манипулировать значением mat-select: вы можете связать переменную, которая содержит элементыВы хотите предварительно выбрать, что-то вроде этого:

<mat-select placeholder="participants" formControlName="participants" multiple [(ngModel)]="selection">
  <mat-option *ngFor="let participant of participants" [value]="participant">{{participant}}</mat-option>
</mat-select>

И тогда вы можете просто отфильтровать исходный массив элементов и получить только те, которые вы хотите выбрать по умолчанию (он должен храниться в selectionсвойство класса в предоставленном случае).

Я создал STACKBLITZ , чтобы продемонстрировать, что это возможно.В этом примере я фильтрую элементы по четным индексам, и, наконец, мы получаем "1'st, 3'rd, 5'th, ..." выбранных элементов.

Обратите внимание, чтоВы можете разделить [(ngModel)] на 2 отдельные директивы, если хотите использовать только одностороннюю привязку: [ngModel] или (ngModelChange).Для получения дополнительной информации посмотрите руководство по синтаксису угловых шаблонов .