Vamos continuar nossa atividade de formulário e criar uma lista de dados. Essa aula pretende ser bem prática.

Primeiramente vamos alterar a forma que salvamos os itens para mantermos uma lista de informações, vamos refatorar a utilização do databaseService para ter uma PessoaService:

import { Injectable } from ‘@angular/core’;
import { DatabaseService } from ‘…/database.service’;
import { Pessoa } from ‘…/model/pessoa’;
const PESSOAS_KEY = “pessoas”
@Injectable({providedIn: ‘root’})
export class PessoaService {
constructor(private databaseService: DatabaseService) { }
async criar(pessoa: Pessoa) {
const pessoas = await this.listar()
if(pessoas) {
pessoas.push(pessoa)
this.databaseService.set(PESSOAS_KEY, pessoas)
}else {
this.databaseService.set(PESSOAS_KEY, [pessoa])
}
}
listar(): Promise<Pessoa[] | null> {
return this.databaseService.get<Pessoa[]>(PESSOAS_KEY)
}
}

Criamos uma pessoa listando as que já existem no banco, se a lista existir incrementamos um item e salvamos novamente. Isso tudo usando a mesma chave do banco de dados. Nosso listar apenas delega a um novo método get que vamos adicionar em nosso databaseService. Repare no uso de generic (get<Pessoa[]>).

Nosso DatabaseService deve conter o método:

async get<T>(key: string): Promise<T | null> {
const dataObject = await this._storage?.get(key)
if (dataObject) {
try {
const data: T = dataObject
return data
} catch (error) {
return new Promise((resolve, reject) => {
reject(error)
})

}
} else {
return new Promise((resolve, reject) => {
resolve(null)
})
}
}

Esse método usa o storage do ionic para pegar os itens existentes, mas temos alguns tratamentos aqui:

1. Verificamos se o objeto existe, caso exista tentamos converter para o tipo de dado passado pelo generic;
2. Caso haja um erro criamos uma promise que irá rejeitar com a causa do erro;
3. Caso o objeto esteja nulo criamos uma nova promise com itens nulos.

Criamos promises pois o get do storage também retorna um, ou seja, é assíncrono.

Nosso formulário então (que está em tab1.page.ts) deve usar o novo serviço:

constructor(private fb: FormBuilder,
private pessoaService: PessoaService,
private alertController: AlertController) { }
async salvar() {
if (this.formGroup.valid) {
this.pessoaService.criar(this.formGroup.value)
const alert = await this.alertController.create({
header: ‘Item salvo’,
message: ‘Item salvo com sucesso’,
buttons: [‘OK’],
})
await alert.present()
} else {
const alert = await this.alertController.create({
header: ‘Formulário inválido’,
message: ‘Formulário inválido’,
buttons: [‘OK’],
})
await alert.present()
}
}

Podemos testar nosso save e verificar que temos os itens no banco local, clique com o botão direito do mouse na página e vá em inspecionar. Depois vá na aba Application > Storage > IndexDB. Selecione o _ionicstorage > _ionickv.

Será algo como na Figura 1:

Figura 1: Verificando storage local.

Repare que configuramos o IONIC storage para usar o SQlite e, se não estiver disponível, usar o IndexedDB, e caso este não esteja disponível vai usar o LocalStorage. Nesse caso está sendo usado o IndexedDB que é melhor que o LocalStorage.

Vamos criar a lista de pessoas na tab2.page.ts: