给每个离子列表标签项（用 ngFor 填充）一个特定的 id

Question

我想生成 <ion-label> 和 <ion-checkbox> 的 <ion-list> 具有不同数量的标签项，所以我使用 * ngFor。如果我单击其中一个标签，我应该会看到其他信息。到目前为止有效。

我目前的问题是，根据我点击的标签，我必须显示不同的信息。这就是为什么我想给每个标签一个 ID。不幸的是 <ion-label (click)="emitAdditionalinformations({{list.item.id}})"> 不起作用，而且我也不知道如何以不同的方式实现它。我希望这就是您需要的一切，并且任何人都能为我提供解决方案。非常感谢。

这是我的 .html 文件：

<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>

这是我在 .ts 文件中的函数：

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

这是我的清单：

list=[
{item: {id: 1, free_text: "blabla", checkbox: true}},
{item: {id: 2, free_text: "some more blabla", additional_information: "hi this is an additional information"}},
{item: {id: 3, free_text: "lorem ipsum"}},
{item: {id: 4, free_text: "for spartaaaaa", checkbox:true, additional_information: "yay more additional information"}},
{item: {id: 5, free_text: "i dont care, i love it"}}
];

Answer 1

把你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');
}

希望我能帮上忙:)

Answer 2

点击即可传递物品

<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
}

给每个离子列表标签项（用 ngFor 填充）一个特定的 id

Give every ion-list label-item (filled with ngFor) a specific id

typescript

ionic-framework

ngfor

ionic3