How to show value of variable from a service.ts on my html - IONIC 2

Question

My requirement is quite simple - I have a service called listproduct.service.ts . This service has a variable called checkfromservice = "check from service"

Now I want this to be printed on listproduct.html . I have called it like this {{checkfromservice}} but it's not printing.

In listproduct.ts I have imported the service:

import { ListproductService } from './listproduct.service';

and even included in providers providers : [ ListproductService,DeleteProductService ],

What else do I need to do to get it printed on HTML?

I am copying code for your reference if needed:

listproduct.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, HttpModule ,Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ListproductService{
    private _url:string = "http://funiks.com/qbook/api/productmasterjson.php";
    constructor(private _http : Http){}

    checkfromservice="chk from service";

    listProduct(){

        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        return this._http.post(this._url,{headers:headers}).map((response:Response) => response.json());
      // return this._http.post(this._url,{headers:headers})
       //.subscribe(data => {this.list = data; console.log(data[0].NAME);});

    }
}

listproduct.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ListproductService } from './listproduct.service';
import { DeleteProductService } from './deleteProduct.service';
import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
import { Subscription } from 'rxjs';

/**
 * Generated class for the ListproductPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-listproduct',
  templateUrl: 'listproduct.html',
  providers : [ ListproductService,DeleteProductService ],
})
export class ListproductPage implements OnInit{
  public list = [];
  loading;
  constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
              public navCtrl: NavController,public navParams: NavParams,public loadingCtrl: LoadingController) {

                this.loading = this.loadingCtrl.create({
                  content: 'Please wait...'
                });

              }

  ngOnInit() {
    this.loading.present();
     this._listProduct.listProduct().subscribe(data => {
       this.list = data;
      console.log(data[0].NAME);
      this.loading.dismiss();
      });
  }

  deleteProduct(list){
     this._deleteProduct.deleteProduct(list.ID).subscribe();
  }

  editProduct(list){
     this.navCtrl.push(ProductservicemasterPage,{"id":list.ID,"productService":list.PRODUCTSERVICE,"name":list.NAME,"unit":list.UNIT,"category":list.CATEGORY,"hsn":list.HSN,"postinghead":list.POSTINGHEAD,"rate":list.RATE,"type":list.TYPE,"sac":list.SACCODE,"tax":list.TAX_CONNECTED,"flag":"U"});
  }
}

listproduct.html

  <ion-navbar>
    <ion-title>listproduct {{checkfromservice}}</ion-title>
  </ion-navbar>

Answer 1

As you explain yourself, the checkfromservice property is living inside the ListproductService class. So when using it in the component template, you need to refer to it the following way:

{{ _listProduct.checkfromservice }}

The reason for this is that the template code's scope, the the scope of the component it belongs to. So if you would have the checkfromservice declared directly in the component, you could have referred to directly in the template the way you did.

Answer 2

As above mentioned answers you can access the variable in service from component using servicename.variableNameInService

Please check the sample here https://stackblitz.com/edit/ionic-yfbtxb which I created to check this scenario.

Answer 3

To preserve the "MVC" concept, you should not call your service directly in the HTML template.

The cleaner way to get the variable from a service is to create a public function in the controller that return _listProduct.checkfromservice .

Answer 4

servicename.variableNameInService应该为您完成工作