通過 props 將數據傳遞給自定義的 mat-grid 組件

Question

我正在嘗試構建一個擴展角度材料 mat-tree 組件的組件。 目標是擁有一個具有可以展開和折疊的行層次結構的表。 我已經或多或少地能夠做到這一點，並且當我直接從組件內的平面文件加載數據時，它正在工作。 Stackblitz 示例在工作狀態下顯示了這一點。 但是，您需要單擊“ Click Me按鈕才能查看數據 - 不知道為什么會這樣。

https://stackblitz.com/edit/n4nite-tree-table

我想要的是能夠將數據從父組件傳遞給組件。 我嘗試過使用@input和property={{}}執行此操作的變體，但我無法讓它工作。 我想要的基本上如下：

1. app.component.ts 調用服務（helper.service）
2. 輔助服務將樹形網格的數據傳回 html 文件
3. app.component.html 通過花括號 {{}} 將數據傳遞給組件

注意：在我的實際實現中， helper.service從 API 調用中獲取數據。

我還有一些不太緊迫的問題：

1. 當我將代碼移動到StackBlitz我顯示展開 V 形StackBlitz mat-icon-buttons具有灰色背景。 我假設我缺少作為我主要項目一部分的主題或樣式。 我想知道我做錯了什么以及如何糾正這個問題以便將來發布到StackBlitz 。

2. 在前面的示例中，每個子項都略微縮進。 我相信這是mat-tree-control 。 我把代碼弄亂了一點，並且在縮進丟失的過程中的某個地方。 我怎樣才能取回這些，或者更具體地說，我做了什么來壓制它們。

3. 在組件中，我使用了一個 hack 來在提供給組件的數據的開頭添加一個額外的dummy記錄。 這條線在下面，它達到了我想要的結果。 但是，當我在頁面中包含相同組件的第二個副本時，我注意到以下行已插入兩次。 我希望這會給我帶來問題，並且我做錯了一些事情，但我不確定是什么？

treeData.unshift({id:"dummy",name:"dummy", type:"dummy", description:"dummy"});

Answer 1

我已經更新了演示。 請檢查。 希望這有幫助。

通過@Input 裝飾器傳遞數據

<n4nite-tree-table [facetHierarchy] ="facetHierarchy"></n4nite-tree-table>