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

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

我要实现的是仅像这样预先选择Cindy和Jim：

我该如何实现？我已经阅读了几个SO问题，但没有成功。感谢您的帮助

Answer 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，第3，第5，...” 项。

请注意，如果只想使用单向绑定，可以将[(ngModel)]分成2个单独的指令：[ngModel]或(ngModelChange)。有关更多信息，请查看angular template syntax guide。

Answer 2

使用Angular6 +时，如果同时拥有formControl和[（ngModel）]，则会出现弃用警告

您似乎在与ng相同的表单字段上使用ngModel formControl。支持将ngModel输入属性和ngModelChange事件与反应形式指令已在Angular v6中弃用，并将被删除在Angular v7中。

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

正如第一个答案所建议的那样，将[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

使用[formControl]而不使用[ngModel]

的选项2

<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

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

2 个答案: