我有一个要求,我需要创建一个多级网格。当用户点击复选框时,子网格将被打开。请看下面显示的 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} ]
希望现在天气晴朗。
最佳答案
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>
关于javascript - 使用 Angular 创建多级网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49444070/