Question

我是角质材料的新手，我有一个自动填写国籍列表，我的国家/地区包含国家/地区代码和价值。我想设置国家/地区代码如果我从下拉列表中选择国家/如果我的回复是国家/地区代码，我需要在ngModel中将其与我的国家/地区名称一起映射。我的问题是我将国家/地区代码映射到我的ngModel，我需要在UI屏幕上显示国家/地区名称。

＆＃13;

<input name="nationality" matInput placeholder="nationality"  class="form-control" [matAutocomplete]="nationAuto" [formControl]="nationalityCtrl"
		 [(ngModel)]="myModel.nationality" required>
 <mat-option *ngFor="let country of filteredNationalityList | async" 
          [value]="country.code">
 <span>{{ country.value }}</span>
</mat-option>

＆＃13;

相同的[value] =＆＃34; country.code＆＃34;为选择下拉工作，但不适用于自动完成功能下拉。

我在这里创建了样本。 https://stackblitz.com/edit/angular-pvqugs 能不能让我知道我失踪的地方。提前致谢

Answer 1

您必须按如下方式更改代码：

<mat-form-field>

  <input matInput type="text" placeholder="nationality" [matAutocomplete]="nationAuto" [formControl]="nationalityCtrl">    
  <mat-autocomplete #nationality="matAutocomplete" (optionSelected)="optionSelected($event)">
    <mat-option *ngFor="let country of filteredNationalityList | async" [value]="country.code">
      {{ country.value }}
    </mat-option>
  </mat-autocomplete>

</mat-form-field>



optionSelected(event) {
    let value = event.option.value;     
    //this.propagateChange(category.title);
}

角度材质2自动完成设置键值

1 个答案: