angular5 - Angular 2 Autocomplete 从所选选项中获取值

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>

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

如何在 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)
}