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

Question

我有一个具有 material 设计的 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"}。我想按名称选择一个项目，但在 return 中取回 ID。实际上，我选择了名字，但最后我得到了名字。如果我更改 [value]="project.id"，我会得到 id，但显示在输入中的是 teh id。

那么，你知道我如何才能获取 ID 但按名称选择并在输入中显示名称吗？

Answer 1

md-autocomplete 需要单独的 control 和 display。 md-autocomplete 提供 displayWith api 可用于选择要在 dropdown/selected 字段中显示的字段。

对于您的代码，它看起来类似于以下内容：

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

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

Choose by name et get the id in md-autocomplete input in angular 4 material application

angular-material

md-autocomplete

angular