为 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的主要内容,如果未能解决你的问题,请参考以下文章