Присвойте каждому элементу метки списка ионов (заполненному ngFor) определенный идентификатор - PullRequest
Новая
       18

Присвойте каждому элементу метки списка ионов (заполненному ngFor) определенный идентификатор

0 голосов
/ 31 августа 2018

Я хочу сгенерировать <ion-list> из <ion-label> и <ion-checkbox>, которые имеют разное количество элементов меток, поэтому я использую * ngFor. Если я нажму на одну из меток, мне нужно показать там дополнительную информацию. Это работает до сих пор.

Моя текущая проблема заключается в том, что в зависимости от того, на какой ярлык я нажимаю, я должен показывать различную информацию. Вот почему я хочу дать каждому ярлыку идентификатор. К сожалению <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"}}
];

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Вы можете передать предмет нажатием кнопки. 

<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
}
0 голосов
/ 31 августа 2018

Измените ваш 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>

для проверки правильности идентификатора вы можете попробовать это: 

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

Надеюсь, я смогу помочь:)

...