Sorry in advance for the the lengthy post.
I am still pretty new to the PWA world and am having trouble getting values added to Storage to show up upon return to my customer list
My Service:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Customer } from './models/customer';
import { StorageConstants } from './storageConstants';
import { Observable } from 'rxjs/Observable';
import { from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CustomersService {
constructor(private storage: Storage) { }
getCustomers() : Observable<Customer[]>{
return from(this.storage.get(StorageConstants.customers)).pipe(
map((customers) => {
return customers ? JSON.parse(customers).map(
(customer: Customer) => new Customer(customer)) : []
})
)
}
addCustomer(customer: Customer) {
let customers_update: Customer[];
return this.getCustomers().pipe(
tap(
(customers : Customer[]) => {
customers_update = customers;
customers_update.push(customer);
this.storage.set(
StorageConstants.customers, JSON.stringify(customers_update));
}
)
);
}
}
My Form component
import { Component, ViewChild, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CustomersService } from '../customers.service';
import { Customer } from '../models/customer';
import { Router } from '@angular/router';
@Component({
selector: 'app-customer-form',
templateUrl: './customer-form.page.html',
styleUrls: ['./customer-form.page.scss'],
})
export class CustomerFormPage implements OnInit{
@ViewChild('customerForm', {static: false}) formValues;
private addCustomer: FormGroup;
constructor(
private formBuilder: FormBuilder,
private customersService: CustomersService,
private router: Router
) {
this.addCustomer = this.formBuilder.group(
{
name: ['', Validators.required],
phone: ['', Validators.required],
email: ['']
}
);
}
ngOnInit() {}
onSubmit() {
const newCustomer: Customer = new Customer(
{
name: this.addCustomer.value.name,
phone: this.addCustomer.value.phone,
email: this.addCustomer.value.email
}
);
this.customersService.addCustomer(newCustomer).subscribe(
{
complete: () => this.router.navigate(['tabs', 'customers'])
}
);
}
}
My list component
import { Component, OnInit } from '@angular/core';
import { CustomersService } from '../customers.service';
import { Customer } from '../models/customer';
import { NavController } from '@ionic/angular';
import { Observable } from 'rxjs';
@Component({
selector: 'customers',
templateUrl: 'customers.page.html',
styleUrls: ['customers.page.scss']
})
export class CustomersPage implements OnInit{
private customers: Observable<Customer[]>;
constructor(private customersService: CustomersService) {}
ngOnInit(): any {
this.customers = this.customersService.getCustomers();
}
}
List html
<ion-content>
<div *ngFor="let customer of customers | async">
<h2>{{customer.name}} {{customer.phone}}</h2>
</div>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button [routerLink]="['add-customer']">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
Adding a customer via the addCustomer method in the service adds to Storage, but the list in the component is only updated upon refresh. I looked around and tried a lot of solutions, but I think I am missing a fundamental understanding about how these pieces are working together.
Any help is greatly appreciated.
