Question

我有一个要求，我需要创建一个多级网格。当用户点击复选框时，将打开子网格。请查看下面显示的HTML：

＆＃13;

<table>
   <thead>
     <tr>
       <th>check</th>
       <th>Result</th>                                            
     </tr>
    </thead>
     <tbody>
         <tr>
           <td><label class="checkbox"><input type="checkbox"><a>test</a></label></td>
           <td> Description</td>
          </tr>
          <tr>
            <td colspan="12">
              <table>
                 <tr>
                    <td><label class="checkbox"><input type="checkbox"><a>testing</a></label></td>
                    <td>description</td>          
                 </tr>
               </table>
            </td>
         </tr>
     </tbody>
  </table>

＆＃13;

类似于此处显示的内容：http://dojo.telerik.com/uQEx。我已经为它编写了角度代码。而且我已经在* ngfor中包含了tr以显示高级别。请查看下面显示的代码：

<tr *ngFor = "let data of values">
  <td>
     <label class="checkbox">
        <input type="checkbox">
     </label>
     <a (click) = "getTerms(data.id)">{{data.id}}</a>
  </td>
  <td>{{data.desc}}</td>
</tr>

当我点击data.id标记时，我需要附加另一个列表。我很困惑如何在html中附加子条款的响应。如果您有任何建议，请告诉我。我也不想使用任何插件。

修改

我在页面加载时得到的响应是：

[
 {id:1, desc:'test', level: 0},
 {id:2, desc:'testing',level: 0}
]

现在当我点击id = 1列时，我发送服务请求： /获得/学期/ 1 我得到了回应：

[ {id:5, desc: 'test test', level: 1} ]

现在以类似的方式点击id = 5，我会得到以下回复： [{id：8，desc：＆＃39;测试测试＆＃39;，级别：2}]

希望现在清楚。

Answer 1

Tavish问题是：你有什么？你想得到什么？ ... 当您向数据添加项目时，一个想法是首先你有

this.data=[
 {id:1, desc:'test', level: 0},
 {id:2, desc:'testing',level: 0}
]

如果点击“1”则收到

[ {id:5, desc: 'test test', level: 1} ]

添加“儿童”更改数据是件好事。所以在getData（data.id，i）

中

//we pass as argument the index too
getData(id:number,index:number)
{
     this.httpClient.get("url"+id).subscribe(res=>{
           this.data[index].children=res
     }
}

因此，您的数据变为

this.data=[
 {id:1, desc:'test', level: 0,children:
   [ {id:5, desc: 'test test', level: 1} ]
 },
 {id:2, desc:'testing',level: 0}
]

现在你只需要使用两个* ngFor

<div *ngFor="let level0 of data;let index=i">
    {{level0.id}}{{level0.desc}}{{level0.level}}
    <button (click)="getData(level0.id,index)">click</button>
    <div *ngFor="let level1 of level0.children">
       {{level1.id}}{{level1.desc}}{{level1.level}}
    </div>
</div>

如果你需要很少的水平，这个想法是有效的，但是如果你有更多，那么两个或三个级别可以成为一个夜晚

您需要更多级别，当收到数据推入数据但添加id_parent

getData(id:number)
{
     this.httpClient.get("url"+id).subscribe(res=>{
           res.forEach(x=>{
             //¡¡IMPORTANT!! not {parent.id,..x}
             this.data.push({...x,parent:id})
           })
     })
}

因此，您的数据变为

this.data=[
 {id:1, desc:'test', level: 0}
 {id:2, desc:'testing',level: 0}
 {id:5, desc: 'test test', level: 1,parent:1}
]

如果你有像

这样的功能

listData(parent:number)
{
    return (parent)? this.data.filter(x=>x.parent==parent)
                   : this.data.filer(x=>!x.parent)
}

你的* ngFor可以像

<div *ngFor="let level0 of data;let index=i">
    {{level0.id}}{{level0.desc}}{{level0.level}}
    <button (click)="getData(level0.id)">click</button>
    <div *ngFor="let level1 of listData(level0.id)">
       {{level1.id}}{{level1.desc}}{{level1.level}}
    </div>
</div>

Answer 2

显示“iterate”组件的示例

//app.component
@Component({
  selector: 'app-root',
  template:`
  <app-app-children [children]="data"></app-app-children>
  `
})
export class AppComponent {
  title = 'app';
  isdisabled:boolean=false;
  data=[{id:1},
        {id:2,
            children:[{id:4},{id:5},{id:6,
                      children:[{id:9},{id:10}]}]},
        {id:3,
             children:[{id:7},{id:8}]}
        ];

  constructor(){}
}


//app-children
@Component({
  selector: 'app-app-children',
  template:`
  <p>
  app-children works!
</p>
<div *ngFor="let item of children">{{item.id}}
  <div *ngIf="item.children">
      <app-app-children [children]="item.children"></app-app-children>
  </div>
</div>`
})
export class AppChildrenComponent {

  constructor() { }
  @Input() children

}

//If whe can have a table, We can change the template like:
@Component({
    selector: 'app-app-children',
    template: `
    <table>
      <thead>
        <th>#</th>
      </thead>
      <tbody>
      <tr *ngFor="let item of children">
        <td>
           <div>
            {{item.id}}
           </div>
           <div *ngIf="item.children">
            <app-app-children [children]="item.children"></app-app-children>
           </div>
        </td>
    </table>
    `,
    styles:[`
      table, th, td {
         border: 1px solid black;
         margin-left:2rem;
      }
      `
     ]
  })

创建角度为

2 个答案: