私はAngular4 Material、特にオートコンプリートコンポーネントを使用しています。
私のオプションのリストfilteredHomeTeamsはタイプObservable <Team []>であり、teamNameと呼ばれるそのようなオブジェクトのプロパティを使用してドロップダウンと選択を構築しています
HTMLは次のとおりです。
<mat-form-field class="example-full-width">
<input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutocomplete]="homeAuto">
<mat-autocomplete #homeAuto="matAutocomplete" (optionSelected)="setHomeTeam()">
<mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" >
{{ team.teamName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
ご覧のとおり、メソッドsetHomeTeam()を呼び出すoptionSelectedというイベントがあります。
私のチームクラスは次のとおりです。
export class Team {
teamName: string;
teamSelfRef: string;
}
私がする必要があること、そしてこれはおそらく経験豊富な角度プログラマーにとって非常に基本的なことです:
ドロップダウンでteam.teamNameを選択し、入力フィールドにteam.teamNameがあります。team.teamSelfRefをパラメーターと同じオブジェクトから「setHomeTeam()」に渡すにはどうすればよいですか?
名前に基づいてオブジェクトを作成して選択する必要がありますが、別のプロパティでロジックをトリガーする必要があります。
オブジェクト全体をパラメーターとしてメソッド「setHomeTeam()」に渡すことができれば、それも機能します。
代わりに、各オプション値をチームとして設定してみませんか。
[value]="team"
そして、そのチームオブジェクト全体を渡すことができます。チームオブジェクトの代わりにチーム名を表示するには、オートコンプリートの表示関数を定義する必要があります。
<mat-autocomplete [displayWith]="displayFn" ...
そしてあなたのクラスでは:
displayFn(team: Team): string {
return team? team.teamName: team;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加