在异步循环中更新firebase数据

时间:2017-07-03 14:47:13

标签: angular ionic-framework

我创建了一个带有重复任务的todolist(例如,每个星期一我都希望显示相同的待办事项)。我使用firebase来存储我的数据,例如:

说明:“测试” jour:“星期天” 优先级: 2 statut:是的 titre:“Bonjour”

我的代码有效,但我想创建一个条件“如果firebase中的那天('jour')与当天不同,那么所有状态('statut')都会更新为false(除了当天的那些) )”。

有可能吗?

这是我的HTML代码:

    <ion-header>
  <ion-navbar color="primary">
    <ion-title>Todolist</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="addItem()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="background">

  <ion-list no-lines>
    <ion-row *ngFor="let item of items | async; let last = last; let index = index;">
      <ion-item-sliding class="m-5" #slidingItem *ngIf="(item.jour) === (theDate | date :'EEEE')" [ngClass]="{'bg-green' : (item.priorite == 1),'bg-orange': (item.priorite == 2),'bg-red': (item.priorite == 3)}">
        <ion-item [ngClass]="{'bg-green' : (item.priorite == 1),'bg-orange': (item.priorite == 2),'bg-red': (item.priorite == 3)}">
          <ion-checkbox color="primary"
                        [(ngModel)]="item.checked"
                        (ngModelChange)="updateItem(item.$key,check.value)"
                        #check></ion-checkbox>
          <ion-item text-wrap item-left
                    (click)="viewItem(item)"
                    [ngClass]="{'bg-green' : (item.priorite == 1),'bg-orange': (item.priorite == 2),'bg-red': (item.priorite == 3), 'barre-texte': (item.checked == true)}">
            {{item.titre}}
          </ion-item>
        </ion-item>
        <ion-item-options>
          <button ion-button color="danger" (click)="deleteItem(item.$key)">Supprimer</button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-row>
  </ion-list>

</ion-content>

打字稿:

import {Component} from '@angular/core';
import {ModalController, NavController} from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item'
import {ItemDetailPage} from '../item-detail/item-detail';
import {Data} from '../../providers/data';

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  items: FirebaseListObservable<any[]>;
  public theDate = Date.now();

  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data, db: AngularFireDatabase) {
    this.items = db.list('/todolist');
  }

  ionViewDidLoad() {}

  // Méthode angularfire2
  updateItem(key: string, newText: any) {
    this.items.update(key, {statut: newText});
  }

  resetStatut(key: string, statut: boolean) {
    this.items.update(key, { statut: statut });
  }

  addItem() {
    let addModal = this.modalCtrl.create(AddItemPage);
    addModal.onDidDismiss((item) => {
      if (item) {
        this.saveItem(item);
      }
    });
    addModal.present();
  }

  saveItem(item) {
    this.items.push(item);
    this.dataService.save(this.items);
  }

  deleteItem(key: string)  {
    this.items.remove(key);
  }

  viewItem(item) {
    this.navCtrl.push(ItemDetailPage, {
      item: item
    });
  }
}

提前致谢

1 个答案:

答案 0 :(得分:0)

在ionViewDidLoad()方法中,您需要加载项目并比较日期,我强烈建议您在需要使用日期时使用moment()。

有些人喜欢这样:

this.items.array.forEach(element: Task => {
  //compare each element
  if(element.jour != moment.day()) {
    this.update(element);
  }
});

希望能帮助