Angular Material Select 樹狀的選項結構(angular material nested options)

General
1

各位好，第一次發問，如有缺失請多多包含。

事情是這樣的，我有一組選項結構如下

{
    items: ["Item A-1", "Item A-2", "Item A-3"],
    groups: [
        {
            items: ["A-A-1", "A-A-2", "A-A-3"],
            groups: []
        },
        {
            items: ["A-B-1", "A-B-2", "A-B-3"],
            groups: [
                {
                    items: ["A-B-A-1", "A-B-A-2"],
                    groups: []
                }
            ]
    ]
}

像這樣有諸多子選項可供選擇且可多選，目前使用 ng-template 來做遞歸產生html，但似乎在使用mat-select時會無法使用ng-container中的選項，雖然點選時會加入mat-selected但是實際上是沒有加入ng-model中的。

image
image1184×1008 24.8 KB

想詢問一下有沒有方式可以解決這個問題呢 謝謝:slightly_smiling_face:。

2

請提供範例程式吧，這樣沒人知道你寫了什麼問題出現在哪

3

你好
很抱歉 沒有附上詳細的程式碼，我用的方式如下

<mat-select>
    <ng-container *ngFor="let group on groups>
        <ng-container *ngTemplateOutlet="selectOptions; ; context: {$implicit: group}" ></ng-container>
    </ng-container>
</mat-select>

<ng-template #selectOptions let-group>
    <ng-container *ngFor="let option on group.options">
        <mat-option>{{ option }}</mat-option>
    </ng-continer>
    <ng-container *ngFor="let sub_group on group.groups>
        <ng-container *ngTemplateOutlet="selectOptions"></ng-container>
    </ng-container>
</ng-template>

用template去列出所有的option

感謝

4

你的select沒有值寫入，參考一下這篇

5

Hi 上述是簡易版本 所以沒有寫得很詳盡
這邊我fork你貼的連結後做了一個範例

在mat-select底下的option會可用，但透過ng-template產生的是不可用的
想知道是不是我使用方式不對，有沒有辦法解決，再麻煩您了
謝謝 :sweat_smile:

6

很不幸，你目前並沒有辦法這樣子寫

請看此 issue

7

了解 感謝你的回覆！！
我先使用固定層數好了 :joy: