按名稱選擇並在 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);

所以，我有 3 個字段的projects ： {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 演示