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

中所说的那样