javascript - 使用 Angular 创建多级网格

Question

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

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

类似于此处所示的内容:http://dojo.telerik.com/uQEx .我已经为它编写了 Angular 代码。我在 *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: 'test test test', level: 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} ]

您更改数据添加“ child ”是件好事。所以在 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>