web-dev-qa-db-ja.com

名前で選択し、mdでIDを取得します-angular 4マテリアルアプリケーションのオートコンプリート入力

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を取得する方法を知っていますが、名前で選択して入力に名前を表示しますか？

angularangular-materialmd-autocomplete
8
Adrien

md-autocompleteには別々のcontrolとdisplayが必要です。 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"になっていることに注意してください。これにより、1つのプロパティを表示できますが、オブジェクトのすべてのプロパティをバックグラウンドで取得できます。そこから、選択したアイテムのidを選択できます。 。

プランカーデモ

12
Nehal