Question

我想生成<ion-list>和<ion-label>的{{1}}，它们具有不同数量的标签项，因此我使用* ngFor。如果单击其中一个标签，则应该在其中显示其他信息。到目前为止有效。

我当前的问题是，根据我单击的标签，我必须显示不同的信息。这就是为什么我要为每个标签指定一个ID。不幸的是<ion-checkbox>不起作用，我也不知道如何以不同的方式实现它。我希望这就是您需要的一切，任何人都可以为我解决。非常感谢。

这是我的.html文件：

<ion-label (click)="emitAdditionalinformations({{list.item.id}})">

这是我在.ts文件中的功能：

<div>
    <ion-list>
        <ion-item *ngFor="let list of list">
            <ion-label (click)="emitAdditionalinformations()"> 
                 {{list.item.free_text}}</ion-label>
            <ion-checkbox *ngIf="list.item.checkbox==true" disabled="false"></ion-checkbox>
        </ion-item>
    </ion-list>
</div>

这是我的列表：

emitAdditionalinformations(id){
    console.log('id');
    this.emitList.emit(this.list);
    console.log('label clicked');
}

Answer 1

您可以通过单击传递项目。

<div>
    <ion-list>
        <ion-item *ngFor="let item of list">
            <ion-label (click)="emitAdditionalinformations(item)"> 
                 {{item.free_text}}</ion-label>
            <ion-checkbox *ngIf="item.checkbox==true" disabled="false"></ion-checkbox>
        </ion-item>
    </ion-list>
</div>

以及打字稿代码。

emitAdditionalinformations(item){
   // your code
}

Answer 2

将您的html更改为：

<div>
        <ion-list>
            <ion-item *ngFor="let element of list">
                <ion-label (click)="emitAdditionalinformations(element.item.id)"> 
                     {{element.item.free_text}}</ion-label>
                <ion-checkbox *ngIf="element.item.checkbox==true" disabled="false"></ion-checkbox>
            </ion-item>
        </ion-list>
</div>

要测试ID是否正确，可以尝试以下操作：

emitAdditionalinformations(id){
    console.log('id: ' + id); //add here the actual id to the output 
    this.emitList.emit(this.list);
    console.log('label clicked');
}

希望我能帮助您：）

为每个离子列表标签项（用ngFor填充）指定一个特定的ID

2 个答案: