Pass SQL values to another Ionic 3 page

Question

I have an input on a page that is stored in the database and would like to show what was stored on a new page.

 </div> 
<ion-list>
  <ion-item>
      <ion-input type="text" placeholder="Nome" [(ngModel)]="entry.name" clearInput ></ion-input>
    </ion-item>
  <ion-item>
    <ion-input type="tel" name="phone" placeholder="Celular" [brmasker]="{phone: true}" [(ngModel)]="entry.celular" clearInput ></ion-input>
  </ion-item>
</ion-list>
<ion-item>
  <ion-textarea rows="3" cols="10" placeholder="Deixe aqui comentários e sugestões..." [(ngModel)]="entry.description"></ion-textarea>
</ion-item>

Send

follows ts file.

    export class HomePage {
  entry = {};

  constructor(
    public navCtrl: NavController,
    public brMaskerIonic3: BrMaskerIonic3,
    public database: DatabaseProvider,
    public account: AccountProvider,
    public entrydao: EntryDaoProvider
    ) { }

  entryReport() {
    console.log('Enviando dados...');
    console.log(JSON.stringify(this.entry));
    this.insertDB();
    this.navCtrl.push(ReportPage, { nome: this.entry['name'] });
  }

  insertDB() {
    const name = this.entry['name'];

    this.account
      .addEntry(name)
        .then(() => console.log('registro inserido'));
  }

}

follows BD.

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Injectable()
export class DatabaseProvider {
  private dbConection: SQLiteObject;

  constructor(public sqlite: SQLite) {
    this.initDB();
  }

  get db(): SQLiteObject{
    return this.dbConection;
  }

  private initDB() {
    this.sqlite.create({
      name: 'data.db',
      location: 'default'
    })
    .then((db:SQLiteObject) => {
      this.dbConection = db;

      //this.dropTables();
      this.createTables();
      this.insertBD(db);
    })
    .catch(e => console.error('error on load db', JSON.stringify(e)));
  }

  private createTables() {
    console.log('creatins tables...');

    this.dbConection.sqlBatch([
      "CREATE TABLE IF NOT EXISTS pesquisa( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT);"
    ])
    .then(() => console.log('tables created successfully'))
    .catch(e => console.error('error on creating tables', JSON.stringify(e)));
  }

  insertBD(db: SQLiteObject) {
    db.executeSql('SELECT COUNT(id) as qtd from pesquisa', [])
      .then((data: any) => {

        if (data.rows.item(0).qtd == 0) {
          db.sqlBatch([
            ['INSERT INTO pesquisa (name) VALUES (?)']
          ])
            .then(() => console.log('Dados pesquisa incluídos com sucesso!'))
            .catch(e => console.error('Erro ao incluir os dados default', e));
        }
      })
      .catch(e => console.error('Erro ao consultar a qtd em pesquisa', JSON.stringify(e)));
  }

  private dropTables() {
    console.log('dropinng tables...');

    this.dbConection.sqlBatch([
      ["DROP TABLE pesquisa"]
    ])
    .then(() => console.log('tables droped successfully'))
    .catch(e => console.error('error on drop tables', JSON.stringify(e)));
  }

}

follows the new page . ts.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EntryDaoProvider } from '../../providers/entry-dao/entry-dao';
import { DatabaseProvider } from '../../providers/database/database';



@IonicPage()
@Component({
  selector: 'page-report',
  templateUrl: 'report.html',
})
export class ReportPage {

  nome;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public entrydao: EntryDaoProvider,
    public database: DatabaseProvider) {

      this.nome = navParams.get('name');
  }


}

I want to display in the html oinput page that was saved in the database in the column name.

Answer 1

puts in your HTML type like this:

    <ion-content>
       {{nome}}
    </ion-content>

the use of the angular bind with the interpolation causes its variable name to be linked to this.name