美好的一天。我已经使用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);
}
}
请帮助。预先谢谢你:)