为 mat-select 预选多个值 - Angular 6

我正在尝试在垫选择中预选多个选项。到目前为止我还无法实现这一目标。

这是 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']);
      }
    })
  }
}

This currently selects all the values per default. Here's a screenshot of how it looks currently:

我想要实现的目标是只预先选择辛迪和吉姆，如下所示：

我怎样才能实现这个目标？我已经阅读了几个SO问题但没有成功。任何帮助表示赞赏

对于 Angular6+，当您同时拥有 formControl 和 [(ngModel)] 时，会出现弃用警告

看来您在同一表单字段上使用 ngModel 表单控件。 支持使用 ngModel 输入属性和 ngModelChange 事件 反应式表单指令已在 Angular v6 中弃用并将被删除 在 Angular v7 中。

选项 1 使用 [ngModel] 而不使用 FormControl

正如第一个答案所示，像这样拆分 [ngModel] 和 (ngModelChange) 。

<mat-select 
  [(ngModel)]="selectedFoods" 
  (ngModelChange)="selectedFoods" name="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'
  ];

选项 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 https://stackblitz.com/edit/angular-mat-select-multi-with-formcontrol