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

Posted

技术标签:

【中文标题】为 mat-select 预选多个值 - Angular 6【英文标题】:Preselecting multiple values for 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 问题并且没有成功。任何帮助表示赞赏

【问题讨论】:

【参考方案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

【讨论】:

以上是关于为 mat-select 预选多个值 - Angular 6的主要内容,如果未能解决你的问题,请参考以下文章

在mat-select上重新选择相同值时触发事件

带有 mat-select 的角度动态表单无法获取值访问器

当值是数字时不显示 mat-select 值

角度材料将图像放在 <mat-select> 的选定值上

<mat-select> 选择值设置,但未显示

如果 QueueTime 超过预选值,则让行人转移到另一个队列