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

【问题标题】：Preselecting multiple values for mat-select - Angular 6为 mat-select 预选多个值 - Angular 6
【发布时间】：2019-04-28 17:22:09
【问题描述】：

我正在尝试在 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']);
      }
    })
  }
}

当前默认选择所有值。这是当前外观的屏幕截图：

我想要实现的是只有 Cindy 和 Jim 像这样预选：

我怎样才能做到这一点？我已经阅读了几个 SO 问题并且没有成功。任何帮助表示赞赏

【问题讨论】：

标签： html angular typescript angular-material

【解决方案1】：

我认为最简单的方法是使用[(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)。欲了解更多信息，请查看angular template syntax guide。

【讨论】：

【解决方案2】：

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

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

选项 1 使用不带 FormControl 的 [ngModel]

正如第一个答案所暗示的，像这样拆分 [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'
  ];

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

选项 2 使用不带 [ngModel] 的 [formControl]

<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

【讨论】：