html - mat-select için birden fazla değeri önceden seçmek - Angular 6

Bir mat-select içinde birden fazla seçeneği önceden seçmeye çalışıyorum. Şimdiye kadar bunu başaramadım.

İşte HTML dosyası:

<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>

İşte kontrolör:

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

Bu şu anda varsayılan olarak tüm değerleri seçiyor. İşte şu anda nasıl göründüğünün bir ekran görüntüsü:

Başarmaya çalıştığım şey, sadece Cindy ve Jim'in önceden seçilmiş olması gibi:

Bunu nasıl başarabilirim? Birkaç Stack Overflow sorusunu okudum ama başarılı olamadım. Her türlü yardım takdir edilir.

Cevap #1

Angular6+ ile hem formControl hem de [(ngModel)] kullandığınızda bir kullanımdan kaldırma uyarısı vardır

Görünüşe göre aynı form alanında formControl ile birlikte ngModel kullanıyorsunuz. NgModel giriş özelliğini ve ngModelChange olayını reaktif form direktifleriyle kullanma desteği Angular v6'da kullanım dışı bırakılmıştır ve Angular v7'de kaldırılacaktır.

FormControl olmadan [ngModel] kullanarak Seçenek 1

İlk cevapta önerildiği gibi, [ngModel] ve (ngModelChange)'i bu şekilde ayırın.

<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>

Ve ts için.

  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] kullanmadan [formControl] ile Seçenek 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>

Bu durumda, seçim FormControl'ün yapıcısında başlatılır.

 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

Cevap #2

Bence en kolay yol, mat-select değerini değiştirmek için [(ngModel)] yönergesini (veya tek yönlü bağlamayı, buna birazdan değineceğim) kullanmaktır: ön seçim yapmak istediğiniz elemanları içeren bir değişkeni bağlayabilirsiniz, şöyle bir şey:

<mat-select placeholder="participants" formControlName="participants" multiple [(ngModel)]="selection">
  <mat-option *ngFor="let participant of participants" [value]="participant">{{participant}}</mat-option>
</mat-select>

Ve ardından başlangıçtaki öğe dizinizi filtreleyebilir ve yalnızca varsayılan olarak seçmek istediğiniz öğeleri alabilirsiniz (sağlanan durumda bu selection sınıf özelliğinde saklanmalıdır).

Bunu göstermek için bir STACKBLITZ oluşturdum, bunun mümkün olduğunu. Bu örnekte, öğeleri çift indekslerde filtreliyorum ve sonunda "1'inci, 3'üncü, 5'inci, ..." öğeler seçilmiş oluyor.

Dikkat edin, eğer sadece tek yönlü bağlama kullanmak istiyorsanız, [(ngModel)] öğesini 2 ayrı direktife bölebilirsiniz: [ngModel] veya (ngModelChange). Daha fazla bilgi için angular şablon sözdizimi kılavuzuna göz atabilirsiniz.

İlgili makaleler