Angular 嵌套类别和 *ngFor 循环 [英] Angular Nested categories and *ngFor loop
问题描述
我有一个未定义数量的数组,可以无限嵌套.我将在我列出产品的页面上的过滤"部分中使用它.但是我无法动态弄清楚如何在 html 端创建它.
<预><代码>[{"name": "模型",项目": [{"name": "面料","fieldType": "复选框",子类别":[]},{"name": "亚麻布","fieldType": "复选框",子类别":[{"name": "彩色","fieldType": "复选框",子类别":[]},{"name": "纯色","fieldType": "复选框",子类别":[{"name": "黑色","fieldType": "复选框",子类别":[]},{"name": "白","fieldType": "复选框",子类别":[]},{"name": "红色","fieldType": "复选框",子类别":[]}]}]}]},{"name": "其他",项目": [{"name": "单选按钮","fieldType": "复选框",子类别":[{"name": "电台 01","fieldType": "收音机",子类别":[]},{"name": "广播 02","fieldType": "收音机",子类别":[]}]}]}]在HTML"方面,我正在尝试创建这样的代码.
<span class="filter-item-title">模型</span><ul><li><mat-checkbox color="primary">Fabric</mat-checkbox><li><mat-checkbox color="primary">亚麻布</mat-checkbox><ul><li><mat-checkbox color="primary">Colored</mat-checkbox></li><li><mat-checkbox color="primary">纯色</mat-checkbox><ul><li><mat-checkbox color="primary">Black</mat-checkbox></li><li><mat-checkbox color="primary">White</mat-checkbox></li><li><mat-checkbox color="primary">Red</mat-checkbox></li><div class="filter-item"><span class="filter-item-title">其他</span><ul><li><mat-checkbox color="primary">单选按钮</mat-checkbox><ul><li><mat-radio-group aria-label="选择一个选项"><mat-radio-button color="primary" value="1">Radio 01</mat-radio-button><mat-radio-button color="primary" value="2">Radio 02</mat-radio-button></mat-radio-group>
这是我的实时示例:https://stackblitz.com/edit/angular-yzdxca如果您能分享您的想法,我将不胜感激.谢谢.
我只是提出想法,所以之后再调整.
这称为递归组件,它是带条件调用的.
recursive.component.html
你的内容在这里<!-- 递归调用--><app-recursive [data]="data" *ngIf="data"></app-recursive>
通过使组件调用自身,只要其中有数据,就可以使其重复.然后,您对其应用一个条件,该条件表明如果数据为空,则停止显示它.
但是要小心:这种组件很重,当你不管理你的数据时,你可能会让你的应用程序崩溃.我建议先考虑您的模型并对其进行改进.
I have an undefined number of arrays that can go nested unlimited. I will use this in the "filtering" section on a page where I list products. But I couldn't dynamically figure out how to create it on the html side.
[
{
"name": "Models",
"items": [
{
"name": "Fabric",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Linen",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Colored",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Solid Color",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Black",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "White",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Red",
"fieldType": "checkbox",
"subCategories": []
}
]
}
]
}
]
},
{
"name": "Other",
"items": [
{
"name": "Radio Buttons",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Radio 01",
"fieldType": "radio",
"subCategories": []
},
{
"name": "Radio 02",
"fieldType": "radio",
"subCategories": []
}
]
}
]
}
]
On the "HTML" side, I am trying to create a code like this.
<div class="filter-item">
<span class="filter-item-title">Models</span>
<ul>
<li>
<mat-checkbox color="primary">Fabric</mat-checkbox>
</li>
<li>
<mat-checkbox color="primary">Linen</mat-checkbox>
<ul>
<li><mat-checkbox color="primary">Colored</mat-checkbox></li>
<li>
<mat-checkbox color="primary">Solid Color</mat-checkbox>
<ul>
<li><mat-checkbox color="primary">Black</mat-checkbox></li>
<li><mat-checkbox color="primary">White</mat-checkbox></li>
<li><mat-checkbox color="primary">Red</mat-checkbox></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="filter-item">
<span class="filter-item-title">Other</span>
<ul>
<li>
<mat-checkbox color="primary">Radio Buttons</mat-checkbox>
<ul>
<li>
<mat-radio-group aria-label="Select an option">
<mat-radio-button color="primary" value="1">Radio 01</mat-radio-button>
<mat-radio-button color="primary" value="2">Radio 02</mat-radio-button>
</mat-radio-group>
</li>
</ul>
</li>
</ul>
</div>
Here's my live sample: https://stackblitz.com/edit/angular-yzdxca I'd appreciate it if you could share your ideas. Thanks.
I'm just giving out the idea, so adapt it afterwards.
This is called a recursive component, it's called with conditions.
recursive.component.html
<div>
your content goes here
</div>
<!-- recursive calling -->
<app-recursive [data]="data" *ngIf="data"></app-recursive>
By making the component call itself, you make it repeat as long as there is data in it. Then, you apply a condition on it, which states that if the data is empty, then you stop displaying it.
Be careful though : this kind of components are heavy and when you do not manager your data, you can make your application crash. I would recommend thinking about your model and improving it first.
这篇关于Angular 嵌套类别和 *ngFor 循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!