html - Chọn trước nhiều giá trị cho mat-select - Angular 6

Tôi đang cố gắng chọn trước nhiều tùy chọn trong một mat-select. Cho đến nay tôi vẫn không thể thực hiện được điều này.

Đây là tệp 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>

Đây là bộ điều khiển:

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

Hiện tại điều này chọn tất cả các giá trị theo mặc định. Đây là một ảnh chụp màn hình về cách nó nhìn hiện tại:

Điều tôi đang cố gắng đạt được là chỉ có Cindy và Jim được chọn trước như thế này:

Làm thế nào tôi có thể đạt được điều này? Tôi đã đọc qua một số câu hỏi trên SO và không thành công. Mọi sự giúp đỡ đều được trân trọng

Câu trả lời #1

Với Angular6+ sẽ có cảnh báo ngừng sử dụng khi bạn có cả formControl và [(ngModel)]

Có vẻ như bạn đang sử dụng ngModel trên cùng một trường biểu mẫu với formControl. Việc hỗ trợ sử dụng thuộc tính đầu vào ngModel và sự kiện ngModelChange với các chỉ thị biểu mẫu phản ứng đã bị ngừng trong Angular v6 và sẽ bị xóa trong Angular v7.

Tùy chọn 1 sử dụng [ngModel] mà không có FormControl

Như câu trả lời đầu tiên gợi ý, hãy tách [ngModel] và (ngModelChange) như thế này.

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

Và cho 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

Tùy chọn 2 sử dụng [formControl] mà không dùng [ngModel]

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

Trong trường hợp này, lựa chọn được khởi tạo trong hàm tạo của 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

Câu trả lời #2

Tôi tin rằng cách dễ nhất là sử dụng directive [(ngModel)] (hoặc một binding một chiều, tôi sẽ đề cập đến nó ngay sau) để thao tác giá trị của mat-select: bạn có thể liên kết một biến, chứa các phần tử bạn muốn chọn trước, kiểu như thế này:

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

Và sau đó bạn có thể chỉ cần lọc mảng các mục ban đầu của mình và chỉ lấy những mục mà bạn muốn chọn mặc định (nó nên được lưu trong thuộc tính lớp selection trong trường hợp được cung cấp).

Tôi đã tạo một STACKBLITZ để chứng minh rằng điều đó là khả thi. Trong ví dụ này, tôi lọc các mục ở vị trí chẵn, và cuối cùng chúng ta nhận được các mục "1'st, 3'rd, 5'th, ..." được chọn.

Lưu ý rằng bạn có thể tách [(ngModel)] thành 2 chỉ thị riêng biệt nếu bạn chỉ muốn sử dụng liên kết một chiều: [ngModel] hoặc (ngModelChange). Để biết thêm thông tin, hãy xem hướng dẫn cú pháp mẫu của Angular.