我正在尝试从视图中的数组中生成多个离子选择。
解释:
我有一个这样的数组:
this.childrenTags = [
[
{ 'id_tag': 1, 'label': 'test-1' }
],
[
{ 'id_tag': 1, 'label': 'test-1' },
{ 'id_tag': 2, 'label': 'test-2' },
{ 'id_tag': 3, 'label': 'test-3' }
]
]
我想在我的视图中生成离子选择,以便为此变量提供 2 个选择: 一个选项仅显示"测试-1",另一个选项显示"测试-1"、"测试-2"、"测试-3">
我有一个第一个循环这样做:
<ion-row *ngFor="let parentLabel of parentsTags; index as k;">
<ion-label stacked>{{parentLabel}} - {{k}}</ion-label>
<tags-list-component [tagsList]="childrenTags" [index]="k"></tags-list-component>
</ion-row>
parentTags 包含一个简单的数组,如["Test 1","Test 2"]
.
我的tags-list-component
看起来像:
<ion-select id="children-tag-{{index}}" required cancelText="{{'buttons.cancel' | translate}}">
<ion-option *ngFor="let tag of tagsList[index]" value="{{tag.id_tag}}-{{index}}">{{tag.label}} - {{index}}</ion-option>
</ion-select>
此解决方案仅显示且始终显示 2 个离子选择,值为:"测试-1"、"测试-2"、"测试-3"。它总是从 childrenTags 中获取最后一个元素。 知道为什么吗? 谢谢。
每次父组件将相同的索引(k(传递给tags-list-component
时。在您的情况下,它是最后一个索引。原因是首先在parentTags
上*ngFor
循环,然后在childrenTags
上执行第二个*ngFor
。
我找到了解决方案:我正在使用 Ionic AlertController 生成一个警报窗口,里面有我的复选框,就像文档中所说的那样