angular / angular/components

Dynamic autocomplete options - "reboot"

オープン
#15,697 コメント 2 件 リアクション 4 件 担当者 0 名 GitHub で見る
area: material/autocomplete feature P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Please describe the feature you would like to request.

Currently working with the autocompleter (or select) and using different templates which define and bubble up mat-optgroups is a challenging and manual process requiring understanding of the inner workings of the components and direct access of private fields.

https://stackblitz.com/edit/dynamic-autocomplete

In addition, when there are no "real" top-level options, a shim disabled option must be inserted and then disguised (or else very undesirable workarounds that don't work well with ngrx state-driven option lists must be undertaken). Otherwise, the autocomplete will not open, and reindexing of select handlers for the dynamic options will fail, so that the list either does not appear initially or cannot be navigated/selected from.

As this is a common use case for autocompleters with behavior driven by another selection (e.g.), and we do not want to access internals, we would like to propose a "reboot" method on the autocomplete (and select) whereby a group of MatOptions can be provided and Material will handle getting things into the correct state.

e.g.
```
...
this.autocomplete.setOptions(options);
...
```

#### What is the use-case or motivation for this proposal?

We have encountered multiple scenarios that were best handled by choosing between multiple optgroup-producing templates. For instance, another select may cause the user to choose a "Type" which then should drive our autocomplete to choose between a very complicated and a very simple template.

Currently, realizing this behavior (without putting all of it in one god controller) is unsafe as we must access class internals, and requires specific and fragile knowledge and patterns.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、リンクされている StackBlitz で動的な option と optgroup のシナリオを再現し、次に option の処理に関する autocomplete コンポーネントと select コンポーネントの API を読みます。private フィールドにアクセスせずに、パブリックな reboot または setOptions API で動的な MatOptions をサポートできる方法を判断し、autocomplete が開き、option のナビゲーションと選択が引き続き可能であることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。