マット選択で複数のオプションを事前選択しようとしています。今のところ、これを達成することはできません。
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の質問を読んだが成功しなかった。どんな助けも歓迎される
最も簡単な方法は[(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]
_または_(ngModelChange)
_)のみを使用する場合は、[(ngModel)]
を2つの個別のディレクティブに分割できることに注意してください。詳細については、 angular template syntax guide をご覧ください。
Angular6 +では、formControlと[(ngModel)]の両方がある場合、非推奨の警告があります
FormControlと同じフォームフィールドでngModelを使用しているようです。 ngModel入力プロパティとリアクティブフォームディレクティブでのngModelChangeイベントの使用のサポートは、Angular v6で廃止され、Angular v7で削除されます。
FormControlなしで[ngModel]を使用するオプション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'
];
[ngModel]なしで[formControl]を使用するオプション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