Как использовать * ngFor в ion-item, чтобы у каждого была индивидуальная функциональность

Question

Контекст: я использую базу данных Firebase для хранения элементов списка. В настоящее время я пытаюсь отобразить эти элементы списка с помощью флажка ion.

JSON:

Желаемая функциональность. По сути, когда пользователь нажимает на флажок, значение «флажок» должно превращаться в «истина» ТОЛЬКО для этой ИНДИВИДУАЛЬНОЙ ПУЛЯ.

Ошибка: Когда установлен один флажок, все остальные элементы в списке также отмечены. Я сидел на заднице всю неделю, пытаясь понять это. Как я могу это исправить?

Код:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AddBulletPage } from '../add-bullet/add-bullet';

//Firebase imports
import * as firebase from "firebase";

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

//Observable
import { Observable } from 'rxjs';
import { bullet } from '../../models/bullet.interface';

@IonicPage()
@Component({
  selector: 'page-clicked-list',
  templateUrl: 'clicked-list.html',
})
export class ClickedListPage {

  bullet = {} as bullet;
  cucumber: boolean;
  selectedItem: any;
  bulletRef: Observable<any[]>;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    private afAuth: AngularFireAuth,
    private db: AngularFireDatabase,) {
    this.selectedItem = navParams.get('list');
    this.afAuth.authState.subscribe(data => {
      this.bulletRef = this.db.list(data.uid+'/listItemsof-/'+this.selectedItem.name).valueChanges();
    })
  }

  updateCucumber($key){
    console.log('New state:'+this.cucumber);
    this.selectedItem = this.navParams.get('list');
    this.afAuth.authState.subscribe(data => {
      this.selectedItem = this.navParams.get('list');
      var usersRef = firebase.database().ref(data.uid+'/listItemsof-/'+this.selectedItem.name);
      var ref = usersRef.orderByChild('checked').equalTo($key);
      var select = this.selectedItem.name;
      var state = this.cucumber;
      ref.once('value').then(function(snap){
        snap.forEach(function (childSnap) {
          var pkey = childSnap.key;
          console.log(pkey);
          console.log(select);
          firebase.database().ref(data.uid+'/listItemsof-/'+select+'/'+pkey).child("checked").set(state);
          console.log('changed state');
        })
      }); 
    });

  }

}

<ion-header>

  <ion-navbar>
    <ion-title class="bar">{{selectedItem.name}}</ion-title>
    <style *ngIf="selectedItem.color=='#ffce4e'">
      .bar {
        background-color: #ffce4e;
      }
    </style>


  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bullet of bulletRef | async">
      <ion-label>{{bullet.description}}</ion-label>
      <ion-checkbox *ngIf="bullet.checked == true" color="pink" disabled="true" checked="true"></ion-checkbox>
      <ion-checkbox *ngIf="bullet.checked == false" color="pink" [(ngModel)]="cucumber" (ionChange)="updateCucumber(bullet.$key==bullet.description)"></ion-checkbox>
    </ion-item>
  </ion-list>

</ion-content>

* Я должен отметить, что все «маркеры», которые добавляются в БД Firebase, начинаются с «проверенного» потомка «false».

Answer 1

<ion-content padding>
  <ion-list>
<div *ngFor="let bullet of bulletRef">
    <ion-item >
      <ion-label>{{bullet.description}}</ion-label>
      <ion-checkbox *ngIf="bullet.checked == true" color="pink" disabled="true" checked="true"></ion-checkbox>
      <ion-checkbox *ngIf="bullet.checked == false" color="pink" [(ngModel)]="cucumber" (ionChange)="updateCucumber(bullet.$key==bullet.description)"></ion-checkbox>
    </ion-item>
</div>
  </ion-list>

</ion-content>

Используйте вот так, я думаю, что это должно работать

Answer 2

Я думаю, что измените ваш HTML на NG-шаблон, тогда все в порядке.

<ion-item>
    <ng-template ngFor let-item [ngForOf]="bulletRef | async">
         <ion-label>{{item.description}}</ion-label>
         <ion-checkbox *ngIf="item.checked == true" color="pink" disabled="true" checked="true"></ion-checkbox>
         <ion-checkbox *ngIf="item.checked == false" color="pink" [(ngModel)]="cucumber" (ionChange)="updateCucumber(item.$key==item.description)"></ion-checkbox>
    </ng-template>
</ion-item>