html - 预选多个值以进行垫选择-Angular 6

我试图在mat select中预选多个选项。到目前为止我还不能做到这一点。
以下是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']);
      }
    })
  }
}

这将按默认值选择所有值。以下是它目前的外观截图：

我想达到的目的是让辛迪和吉姆这样预选：

我怎样才能做到这一点？我读了好几个这样的问题，但没有成功。如有任何帮助，我们将不胜感激

最佳答案

我认为，最简单的方法是使用[(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)]拆分为两个单独的指令：[ngModel]或(ngModelChange)。有关更多信息，请查看angular template syntax guide。

关于html - 预选多个值以进行垫选择-Angular 6，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53491710/