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

Question

我有一个带有材料设计的 Angular 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>

还有我的 ts 代码：

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

所以，我有 projects 和 3 个字段：{id: "1", name: "test", photo: "test"}。 我想按名称选择一个项目，但要取回 id 作为回报。 实际上，我已经选择了名字，但我在最后得到了名字。如果我更改 [value]="project.id"，我会得到 id，但它是显示在输入中的 id。

那么，您知道我可以如何获取 id 但按名称选择并在输入中显示名称吗？

Answer 1

对于md-autocomplete，您需要有单独的control 和display。 md-autocomplete 提供 displayWith api，可用于选择要在下拉/选定字段中显示的字段。

对于您的代码，它看起来如下所示：

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 demo