繁体   English   中英

如何在离子项中使用* ngFor,以便每个都具有单独的功能

How to use *ngFor in ion-item so that each has an individual functionality

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

JSON: 在此输入图像描述

期望的功能:基本上,当用户单击复选框时,“已检查”的值应仅对该单独的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”开头。

2 个回复
<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>

使用像这样我认为它应该工作

我想把你的html改成ng-template然后一切都好。

<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>
4 使用* ngFor时在离子项目上设置类

我正在使用以下* ngFor循环。 在响应中,我返回tag.style-这是我要应用于离子项目行的类。 此代码无效-循环中的第一项似乎停止了。 如何将离子项目的类别设置为tag.style? ...

2017-03-08 00:18:20 1 813   angular
7 如何在其他* Ngfor中使用* Ngfor

我正在尝试为数组“ lesCriteres”的每个元素创建一个复选框。 然后我希望检查这些复选框中的每个复选框的值是否在表“ actif.lesCriteresActifs”中 这是我想要的代码,但是不能按我的要求工作 楷模 行为模型 CritereActif模型 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM