angular - Her birinin bireysel işlevselliğe sahip olması için *ngFor'u ion-item içinde nasıl kullanılır

Bağlam: Liste öğelerini saklamak için Firebase Veritabanını kullanıyorum. Şu anda, bu liste öğelerini bir ion-checkbox ile görüntülemeye çalışıyorum.

JSON:

İstenen işlevsellik: Temelde, bir kullanıcı onay kutusuna tıkladığında, değer "checked" sadece O BİREYSEL MADDE İÇİN "true" olmalıdır.

Hata: Bir kutu işaretlendiğinde, listedeki diğer tüm öğeler de işaretleniyor. Bunu çözmeye çalışarak tüm hafta boyunca oturdum. Bunu nasıl düzeltebilirim?

Kod :

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 veritabanına eklenen tüm "bullet"ların, "checked" adında "false" bir alt öğeyle başladığını belirtmeliyim.

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

Bence böyle kullan, işe yaramalı

Cevap #2

Bence HTML'inizi ng-template olarak değiştirin, sonra her şey yolunda olur.

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

İlgili makaleler