动态绑定 <mat-select> 表单值

Question

我有一个 'div'，我正在使用“mat-select”。在里面我有多 select 格式的 countryList 下拉列表。

我的任务是，点击一个按钮，我想在“mat-select”中自动填充国家/地区。

<div class="col-sm-5">
   <mat-form-field style="width: 372px;">
     <mat-label>Select your options</mat-label>
     <mat-select formControlName="origin" [(value)]="selected" multiple>
        <mat-option *ngFor="let country of countryLists" [value]="country">{{ country }}</mat-option>
   </mat-select>
   </mat-form-field>
</div>

Answer 1

HTML

<div class="col-sm-5">
  <mat-form-field style="width: 372px;">
    <mat-label>Select your options</mat-label>
    <mat-select formControlName="origin" [(value)]="selected" multiple>
      <mat-option *ngFor="let country of countryLists" [value]="country">{{ country }}</mat-option>
    </mat-select>
  </mat-form-field>
  <button (click)="populate()" class="btn btn-primary ml-2">Populate</button>
</div>

TS

  countryLists: string[] = [];
  selected: any;


  ngOnInit(): void {
  }

  populate(): any {
    this.countryLists = ['SriLanka', 'India', 'England'];
  }

动态绑定 <mat-select> 表单值

Bind <mat-select> form value dynamically

angular-material

angular