N個のフィルターを持つコンポーネントがあり、それらのフィルターごとにM個の値があります。これらの両方を動的に表示しようとしていますが、機能していないようです。
値をテストし、正しい構文を使用してデータを取得しているかどうかを確認し、コードがオブジェクトからデータを取得できるかどうかを確認しました。ただし、動的フィルターを使用すると、ドロップダウン<button>タグを超えて何も実行されていないように見えます。
ここで、アプリケーションのレプリカとして作成したStackBlitzプロジェクトを見ることができます。フィルタオブジェクトをgetFilters、HTMLから呼び出したときに返される形式でコンソールに出力しました。ご覧のとおり、データを返していますが、ユーザーがドロップダウンをクリックしても、filterValuesは表示されません。
それぞれが表示されることを期待していfilterValuesますが、ドロップダウンボタンをクリックしても何も起こりません。動的機能を削除すると、ドロップダウンに値が表示されますが、動的にしたいと思います。どんな助けでも大歓迎です。
関連するテンプレートコード：
<div ngbDropdown class="d-inline-block" *ngFor="let filter of getFilters()">
<button class="btn btn-outline-primary" id="{{filter[0]-dropdown}}" ngbDropdownToggle>{{filter[1].displayName}}</button>
<div ngbDropdownMenu attr.aria-labelledby="{{filter[0]-dropdown}}">
<button ngbDropdownItem *ngFor="let val of filter[1].filterValues">{{val}}</button>
</div>
</div>
および関連するTypeScriptコード：
getFilters() : [string, FilterItem][] {
...
return Array.from(this.filters.entries());
}
あなたが目撃している問題は、あなたのgetFilters()機能がべき等ではないために引き起こされます。
Angularは、ユーザーの介入なしにメソッドを2回続けて呼び出すと、同じ値を返すことを期待しています。関数が配列を返す場合、同じ配列を2回返す必要があります。ただし、コードでは、毎回異なる配列を返します（同じ内容であっても、参照は異なります）。
このgetFilters()メソッドの実装を試してみると、問題が解決することがわかります（このように問題を解決することはお勧めしませんが、問題がどこにあるかを示しています）。
private cached;
getFilters() : [string, FilterItem][] {
if (!this.cached)
this.cached = Array.from(this.filters.entries())
return this.cached;
}
このような値をキャッシュすることはお勧めしません。代わりに、アプリケーションの状態を変更するコードを、アプリケーションの状態を取得するコードとは別の部分に配置する必要があります。
constructor () {
this.filters = ...
this.filterEntries = Array.from(this.filters.entries());
}
そして、テンプレートで：
<div ngbDropdown class="d-inline-block" *ngFor="let filter of filterEntries">
Angularのドキュメントでは、副作用について次のように説明しています。最も関連性の高いテキストを太字で示しています。
目に見える副作用はありません
テンプレート式は、ターゲットプロパティの値以外のアプリケーション状態を変更しないでください。
角度の用語では、べき等式は、従属値の1つが変更されるまで、常にまったく同じものを返します。
べき等式が文字列または数値を返す場合、連続して2回呼び出されると、同じ文字列または数値を返します。式が配列を含むオブジェクトを返す場合、連続して2回呼び出されると、同じオブジェクト参照が返されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加