mat-select에 대한 다중 값 사전 선택

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

현재 기본값당 모든 값이 선택됩니다.다음은 현재 상태의 스크린샷입니다.

제가 달성하고자 하는 것은 오직 신디와 짐만이 다음과 같이 미리 선택되도록 하는 것입니다.

어떻게 하면 이를 달성할 수 있을까요?몇 가지 SO 질문을 읽었지만 성공하지 못했습니다.어떤 도움이든 감사합니다.

Angular6+의 경우 양식Control과 [(ngModel)]이 모두 있는 경우 사용되지 않는 경고가 표시됩니다.

양식 컨트롤과 동일한 양식 필드에서 ngModel을 사용하는 것 같습니다.반응형 지시어와 함께 ngModel 입력 속성 및 ngModelChange 이벤트를 사용하는 지원은 Angular v6에서 더 이상 사용되지 않으며 Angular v7에서 제거됩니다.

FormControl 없이 [ngModel]을 사용하는 옵션 1

첫 번째 답변에서 알 수 있듯이, [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

[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

나는 가장 쉬운 방법은 사용하는 것이라고 생각합니다.[(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'rd, ..." 항목을 선택합니다.

공유할 수 있습니다.[(ngModel)]단방향 바인딩만 사용하려는 경우 두 개의 별도 디렉티브로:[ngModel]또는(ngModelChange)자세한 내용은 각도 템플릿 구문 가이드를 참조하십시오.

언급URL : https://stackoverflow.com/questions/53491710/preselecting-multiple-values-for-mat-select-angular-6