angular8 - 如果在角度 8 的 kendo-treeview 中没有 child ，如何隐藏该行？

Question

如果没有要显示的子行，如何隐藏父行。文本我可以隐藏它，但空行仍然存在于 DOM 元素中。任何人都可以帮助解决它吗？角度 8 + Kendo Treeview 。

<kendo-treeview kendoTreeViewExpandable [nodes]="data" [children]="children" [hasChildren]="hasChildren" textField="text"
     >
        <ng-template kendoTreeViewNodeTemplate let-dataItem>
               <span>{{dataitem.title}}</span>
        </ng-template>
    </kendo-treeview>

Answer 1

后端，我有一个父行，如下所示:

{
    id: "session_client_1669"
    id_linked: "1669"
    id_regroup: null
    libelle: "UN CLIENT PRESQUE PARFAIT"
    menu: "client"
    type: "parent"
}

然后，一个子行采用 id_regroup 其父的 id :

{
    id: "new_DOC_RAPPORT_SESSION_1669"
    idLinked: "1669"
    id_regroup: "session_client_1669"
    libelle: "Document à générer - Rapport de fin de formation"
    menu: "client"
    type: "generated"
}

最后，我使用一个函数来递归过滤掉没有子元素的父类型元素，从而在 DOM 中摆脱它:

function removeEmptyParent(listDoc) {
  try {
    return new Promise(async resolve => {
      let listDocTemp = (listDoc || []).filter(
        item =>
          (listDoc.findIndex(e => e.id_regroup === item.id) !== -1 && item.type === 'parent') || item.type !== 'parent',
      );
      const index = (listDocTemp || []).findIndex(
        item => listDocTemp.findIndex(e => e.id_regroup === item.id) === -1 && item.type === 'parent',
      );
      if (index > -1) {
        listDocTemp = await removeEmptyParent(listDocTemp);
      }
      resolve(listDocTemp);
    });
  } catch (error) {
    console.log(`error`, error); // eslint-disable-line
  }
}