Question

子节点出现在每个父节点中。预期结果是子节点将出现在特定的父节点上。还有一个实例，其中子节点再次具有子节点。

建议我们不要为此使用库，因为以前我们使用ngx树视图，但是当我们使用它时，使用其他搜索文本框时，在过滤树视图内容时会遇到困难。

我做的第一件事是对父节点使用FOR循环。我使用IF条件比较此父节点是否有一个子对象（对象数组中）。如果满足IF条件，则此子节点将被推入“特定父节点”的数组，并返回将在* ngIf中使用的布尔变量。

this.service.Hierarchy（）;传递的数据是

[{text：“ Parent1”，值：1，子级：Array（5），选中：false}，

{text：“ Parent2”，值：1，子级：Array（0），已检查：false}，

{text：“ Parent3”，值：1，子级：Array（0），已选中：false}，

{text：“ Parent4”，值：1，子级：Array（0），已检查：false}，]

.ts文件中的

createTree() {
let hierarchy= this.service.Hierarchy(); //data passed
this.treeComponent = hierarchy; 

for(let i=0; i<this.treeComponent.length; i++){

  //Compare parent if has a children, Example 1 has a children
  if(this.treeComponent[i].children.length != 0 ){ 
    for(var children of this.treeComponent[i].children){

      //use for ngIF
      this.isChildrenAvailable = true;
      this.child.push(children); 
    }     
  }
}}

.html文件中的

<ul *ngFor="let item of treeComponent">
  <input type="radio">
  {{item.text}}

    <div *ngIf = "isChildrenAvailable">
      <ul *ngFor="let child of child" >
        <input type="radio">
           {{child.text}}
     </ul>
   </div>
 </ul>

预期结果：

父母1

孩子1（父母1的孩子）

孩子2（父母1的孩子）

`*小孩小孩1（小孩2的孩子）
父母2
父母3

实际结果：

父母1

孩子1（父母1的孩子）

孩子2（父母1的孩子）
父母2

孩子1（父母1的孩子）

孩子2（父母1的孩子）
父母3

孩子1（父母1的孩子）

孩子2（父母1的孩子）

Answer 1

您可以简单地遍历模板中的子数组，如果需要无休止的嵌套支持，则可以使用recursive components/templates

<ul>
  <li *ngFor="let item of treeComponent">
    <input type="radio">{{item.text}}
    <div *ngIf="item.children.length">
      <ul>
        <li *ngFor="let child of item.children">
           <input type="radio">{{child.text}}
        </li>
     </ul>
    </div>
  </li>
</ul>

子节点出现在每个父节点中

1 个答案: