Ionic 3 & Angular 4 :从视图中的 2 个循环生成 ion-select
Ionic 3 & Angular 4 : generate ion-select from 2 loops in view
我正在尝试从我认为的数组中生成多个离子-select。
解释:
我有一个这样的数组:
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' }
]
]
我想生成 ion-select 在我看来有 2 selects 这个 var :
一个 select 仅显示 "test-1",第二个显示 "test-1"、"test-2"、"test-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 个离子-select,其值为:“test-1”,"test-2","test-3"。它总是从 childrenTags 中获取最后一个元素。
知道为什么吗?
谢谢。
每次您的父组件将相同的索引 (k) 传递给 tags-list-component
。在您的情况下,它是最后一个索引。原因是 parentTags
上的第一个 *ngFor
循环在 childrenTags
上执行第二个 *ngFor
之前完成了它的执行。
我找到了解决方案:我正在使用 Ionic AlertController 生成一个警报 window,里面有我的复选框,就像 doc
中所说的那样
我正在尝试从我认为的数组中生成多个离子-select。
解释:
我有一个这样的数组:
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' }
]
]
我想生成 ion-select 在我看来有 2 selects 这个 var : 一个 select 仅显示 "test-1",第二个显示 "test-1"、"test-2"、"test-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 个离子-select,其值为:“test-1”,"test-2","test-3"。它总是从 childrenTags 中获取最后一个元素。 知道为什么吗? 谢谢。
每次您的父组件将相同的索引 (k) 传递给 tags-list-component
。在您的情况下,它是最后一个索引。原因是 parentTags
上的第一个 *ngFor
循环在 childrenTags
上执行第二个 *ngFor
之前完成了它的执行。
我找到了解决方案:我正在使用 Ionic AlertController 生成一个警报 window,里面有我的复选框,就像 doc
中所说的那样