如果在angular 8中的kendo-treeview中没有子行，该如何隐藏该行？

Question

如何隐藏父行如果它没有要display.text的子行我可以隐藏它，但在DOM元素中仍然存在空行。有谁能帮助解决这个问题吗？angular 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的id_regroup的子行：

{
    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
  }
}