Question

在角度材质中，自动填充功能mat-option将在“值”字段和文本中具有相同的条目。

<mat-form-field fxFlex="50">
   <input type="text" placeholder="{{label.addUser.formLabels.role}}"   matInput [matAutocomplete]="role"  formControlName="roleId">
   <mat-autocomplete  #role="matAutocomplete" autoActiveFirstOption>
     <mat-option *ngFor="let option of roleListFilter | async" value="{{option.roleId}}" >
     <span>{{option.roleName}}</span>
    </mat-option>
   </mat-autocomplete>
</mat-form-field>

我得到的输出如下面的问题所示..

How can I get selected item value in Angular 2 Material Autocomplete

我想在文本框中显示所选字符串并同时在value字段中设置roleId。这是否可以实现？

Answer 1

尝试以下代码：

 <mat-form-field>
    <input matInput placeholder="State" aria-label="State" 
      [matAutocomplete]="auto" [formControl]="your_ctrl">
    <mat-autocomplete #auto="matAutocomplete">
       <mat-option (click)="getSelectedElementId(item.id)" *ngFor="let item of your_list | async" 
          [value]="item.name">
          <span>{{ item.name }}</span> |
       </mat-option>
    </mat-autocomplete>
</mat-form-field>

在.ts文件中：

getSelectedElementId(id){
    console.log(id)
}

Angular 2自动完成以从所选选项中获取值

1 个答案: