9

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

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

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

4

1 回答 1

11

你需要有单独的control和displayfor md-autocomplete。md-autocomplete提供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 演示

于 2017-07-18T14:15:27.140 回答