angular - 如何在 ion-item 中使用 *ngFor 以便每个都有单独的功能

Question

上下文:我正在使用 Firebase 数据库来存储列表项。目前，我正在尝试使用 ionic 复选框显示这些列表项。

JSON:

所需的功能:基本上，当用户单击复选框时，“checked”的值应该仅针对那个 INDIVIDUAL BULLET 变为“true”。

错误: 当一个框被选中时，列表中的所有其他项目也被选中。我整个星期都在坐以待毙，试图弄清楚这一点。我怎样才能解决这个问题？

代码:

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>

像这样使用我认为它应该有效