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