按名称选择并在角度4材质应用程序中获取md-autocomplete输入中的id

Question

我有一个角度4应用与材料设计.在这个应用程序中,我有一个带有自动填充字段的表单.

这是我的HTML代码:

<div class="form-group">
  <md-input-container>
    <input mdInput type="text" mdInput [mdAutocomplete]="project" [formControl]="projectCtrl" placeholder="Choose a project" [(ngModel)]="selectProjectForNewCollab" name="selectProjectForNewCollab">
  </md-input-container>
  <md-autocomplete #project="mdAutocomplete">
    <md-option *ngFor="let project of filteredProjects | async" [value]="project.name">
      {{ project.name }}
    </md-option>
  </md-autocomplete>
</div>

我的代码:

console.log("project = " + this.selectProjectForNewCollab);

所以,我有projects3个领域:{id: "1", name: "test", photo: "test"}.我想通过它的名字选择一个项目,但回过头来获取id.实际上,我选择了这个名字,但最后得到了名字.如果我改变了[value]="project.id",我得到了id,但它是输入中显示的id.

那么,你知道如何获取id但是按名称选择并在输入中显示名称吗？

Answer 1

你需要单独control和displayfor md-autocomplete.md-aucomplete提供displayWithapi,可用于选择要在下拉列表/选定字段中显示的字段.

对于您的代码,它看起来像下面的内容:

HTML:

<md-input-container>
  <input mdInput placeholder="Project" 
         [(ngModel)]="selectProjectForNewCollab" (ngModelChange)="setProject(project)"
         [mdAutocomplete]="project" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #project="mdAutocomplete" [displayWith]="displayFn">
  <md-option *ngFor="let project of filteredStates | async" [value]="project" >
    {{ project.name }}
  </md-option>
</md-autocomplete>

在component.ts中,必须添加displanFn:

displayFn(project): string {
    console.log(project);
      return project ? project.name : project;
}

请注意,在html中,绑定现在是整个对象[value]="project",它允许显示一个属性,但在后台获取对象的所有属性,从那里,您可以选择id所选项目.

Plunker演示