不使用令牌将数据保存在firebase数组中

时间:2018-10-26 05:49:35

标签: firebase firebase-realtime-database

美好的一天。我已经使用ionic框架和firebase作为数据库完成了移动应用程序,并且按照本教程https://github.com/fabricadecodigo/ionicfirebasecrud/blob/master/src/providers/contact/contact.ts进行操作,一切正常。

问题是我如何以数组形式而不是令牌形式保存数据?Here are the current firebase database ..和i want it to be like this

editnote.html
<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{ title }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="form">
    <ion-item>
      <ion-label stacked>Nome</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>
    <ion-item *ngIf="!form.controls.name.valid && (form.controls.name.dirty || form.controls.name.touched)" color="danger">
      <div [hidden]="!form.controls.name.errors.required">
        O campo é obrigatório
      </div>
    </ion-item>

    <ion-item>
      <ion-label stacked>Telefone</ion-label>
      <ion-input type="tel" formControlName="tel"></ion-input>
    </ion-item>
    <ion-item *ngIf="!form.controls.tel.valid && (form.controls.tel.dirty || form.controls.tel.touched)" color="danger">
      <div [hidden]="!form.controls.tel.errors.required">
        O campo é obrigatório
      </div>
    </ion-item>

    <div padding>
      <button ion-button block type="submit" [disabled]="!form.valid" (click)="onSubmit()">Salvar</button>
    </div>
  </form>
</ion-content>

editnote.ts

import { ContactProvider } from './../../providers/contact/contact';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-edit-note',
  templateUrl: 'edit-note.html',
})
export class EditNotePage {
  title: string;
  form: FormGroup;
  contact: any;

  constructor(
    public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder, private provider: ContactProvider,
    private toast: ToastController) {

    // maneira 1
    this.contact = this.navParams.data.contact || { };
    this.createForm();

    // // maneira 2
    // this.contact = { };
    // this.createForm();

    // if (this.navParams.data.key) {
    //   const subscribe = this.provider.get(this.navParams.data.key).subscribe((c: any) => {
    //     subscribe.unsubscribe();

    //     this.contact = c;
    //     this.createForm();
    //   })
    // }

    this.setupPageTitle();
  }

  private setupPageTitle() {
    this.title = this.navParams.data.contact ? 'Alterando contato' : 'Novo contato';
  }

  createForm() {
    this.form = this.formBuilder.group({
      key: [this.contact.key],
      name: [this.contact.name, Validators.required],
      tel: [this.contact.tel, Validators.required],
    });
  }

  onSubmit() {
    if (this.form.valid) {
      this.provider.save(this.form.value)
        .then(() => {
          this.toast.create({ message: 'Contato salvo com sucesso.', duration: 3000 }).present();
          this.navCtrl.pop();
        })
        .catch((e) => {
          this.toast.create({ message: 'Erro ao salvar o contato.', duration: 3000 }).present();
          console.error(e);
        })
    }
  }
}

providers/contact/contact.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class ContactProvider {
  private PATH = 'contacts/';

  constructor(private db: AngularFireDatabase) {
  }

  getAll() {
    return this.db.list(this.PATH, ref => ref.orderByChild('name'))
      .snapshotChanges()
      .map(changes => {
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
      })
  }

  get(key: string) {
    return this.db.object(this.PATH + key).snapshotChanges()
      .map(c => {
        return { key: c.key, ...c.payload.val() };
      });
  }

  save(contact: any) {
    return new Promise((resolve, reject) => {
      if (contact.key) {
        this.db.list(this.PATH)
          .update(contact.key, { name: contact.name, tel: contact.tel })
          .then(() => resolve())
          .catch((e) => reject(e));
      } else {
        this.db.list(this.PATH)
          .push({ name: contact.name, tel: contact.tel })
          .then(() => resolve());
      }
    })
  }

  remove(key: string) {
    return this.db.list(this.PATH).remove(key);
  }
}

请帮助。预先谢谢你:)

0 个答案:

没有答案