angular - 绑定动态形成值

Question

我有一个“div”，我正在使用“mat-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>

标签： angularangular-material

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