亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用角度材料在下拉列表中創建樹視圖?

如何使用角度材料在下拉列表中創建樹視圖?

心有法竹 2022-12-18 15:38:11
誰能告訴我,如何在下拉列表中創建樹視圖。下拉值將從 rest api 調用作為 json 獲取,如下所示。subchild 也可能包含更多級別的 child。我必須在這里做自動建議來執行父級和子級的過濾器。 VehicleList = [      {        parent: "audi",        child: [{          type: 'G-audiA',          subchild: [{              id: 1,              name: 'type audi A1'          }, {              id: 2,              name: 'type audi A2'          }]        }, {          type: 'G-audiB',          subchild: [{              id: 1,              name: 'type audi B1'          }, {              id: 2,              name: 'type audi B2'          }]        }]      }, {        parent: "bmw",        child: [{          type: 'G-bmwA',          subchild: [{              id: 1,              name: 'type bmw A1'          }, {              id: 2,              name: 'type bmw A2'          }]        }, {          type: 'G-bmwB',          subchild: [{              id: 1,              name: 'type bmw B1'          }, {              id: 2,              name: 'type bmw B2'          }]        }]  }]任何幫助將不勝感激!?。?
查看完整描述

1 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

基于Angular Material Tree文檔中的第一個示例,我設法構建了一個下拉菜單,其中包含一個樹結構,如下所示:

http://img1.sycdn.imooc.com//639ec37f0001f32504730339.jpg

顯示樹的技巧是添加禁用/空選項。我用它作為標簽。該樹取自他們的示例,所以我根本沒有修改它,您可以修改節點結構以匹配您自己的。


為了在下拉列表的標簽中顯示選定的項目,您可以創建一個方法,該方法將返回選定項目的字符串,因為它們的SelectionModel對象具有 selected 屬性,該屬性將返回所有選定的節點。


/** The selection for checklist */

checklistSelection = new SelectionModel<TodoItemFlatNode>(

    true /* multiple */

);

為了從樹中獲取選定的項目:


return this.checklistSelection.selected.map(s => s.item).join(",");

http://img1.sycdn.imooc.com//639ec389000160ba02850084.jpg

對于過濾部分,我認為您可以查看此答案。希望這會有所幫助!

堆棧閃電戰

編輯:如果您選擇一個子項,即使未選擇其所有子項,父項也會被選中并添加到 SelectionModel 中。如果您不希望此行為對函數進行評論descendantsPartiallySelected。這不會選中該復選框,因此除非選擇了所有子項,否則不會將父項添加到 SelectionModel 中


查看完整回答
反對 回復 2022-12-18
  • 1 回答
  • 0 關注
  • 129 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號