web-dev-qa-db-ja.com

mat-selectの複数の値の事前選択-Angular 6

マット選択で複数のオプションを事前選択しようとしています。今のところ、これを達成することはできません。

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

これは現在、デフォルトごとにすべての値を選択します。現在のスクリーンショットは次のとおりです。 enter image description here

私が達成しようとしているのは、CindyとJimだけを次のように事前選択することです：

enter image description here

どうすればこれを達成できますか？私はいくつかのSOの質問を読んだが成功しなかった。どんな助けも歓迎される

htmlangulartypescriptangular-material
6
Rana

最も簡単な方法は[(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 をご覧ください。

2
Commercial Suicide

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

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

[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

6
intotecho