3

次の matAutocomplete formControl で項目を選択すると、ドロップダウンに表示される値ではなく、常に ID が取得されます。

[value]="baseCoin.ID" を [value]="baseCoin.Abbr" に変更すると、アイテムを選択すると正しい文字列が表示されますが、baseCoin.ID を返すには (ngModelChange) イベントが必要ですbaseCoin.Abbr の代わりのメソッド。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins( $event )">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

何か不足していますか？

助けていただければ幸いです。ありがとう。

4

4 に答える 4

0

(ngModelChange) は $event を返さずに populateMarketCoins() をトリガーするようになりました。

(onSelectionChange)="setBaseCoinID( baseCoin.ID )" が mat-option に追加されました。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins()">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr" (onSelectionChange)="setBaseCoinID( baseCoin.ID )">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

メソッド setBaseCoinID() は、メソッド populateMarketCoins() によって呼び出されるインスタンス変数を設定します。

これまでのところ、これは機能します。

ただし、選択した取引所に基づいてベース コインが選択されるより高いレベルでは、次のようにマット選択を同様の方法で使用したいと考えています。

<mat-form-field>
    <mat-select placeholder="Exchange" name="Exchange" [(ngModel)]="newTrade.Exchange.Title" (ngModelChange)="populateBaseCoins()">
        <mat-option *ngFor="let exchange of exchanges" [value]="exchange.Title" (onSelectionChange)="setExchangeID( exchange.ID )">
            {{exchange.Title}}
        </mat-option>
    </mat-select>
</mat-form-field>

(onSelectionChange) は、すべての mat-option に対して毎回 (初期化時にも) 発生することがわかったので、メソッド setExchangeID は常に配列交換の最後を設定します。

何を変更する必要がありますか？

于 2018-02-13T15:36:31.880 に答える