给每个 ion-list label-item（用 ngFor 填充）一个特定的 id答案

【问题标题】：Give every ion-list label-item (filled with ngFor) a specific id给每个 ion-list label-item（用 ngFor 填充）一个特定的 id
【发布时间】：2019-02-06 03:46:00
【问题描述】：

我想生成一个<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"}}
];

【问题讨论】：

标签： typescript ionic-framework ionic3 ngfor

【解决方案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
}

【讨论】：

【解决方案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');
}

希望我能帮忙:)

【讨论】：

也谢谢。这两个答案都帮助了我！