如何在我的html上显示service.ts中的变量值 - IONIC 2

Question

我的要求很简单 - 我有一个名为listproduct.service.ts的服务。此服务有一个名为 checkfromservice = "check from service" 的变量

现在我希望把它打印在listproduct.html.我{{checkfromservice}}这样称呼它，但它没有打印。

listproduct.ts，我导入了该服务：

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

甚至包含在提供商providers : [ ListproductService,DeleteProductService ],

我还需要做什么才能将其打印在HTML上？

如果需要，我正在复制代码供您参考：

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

正如你自己解释的那样，checkfromservice属性位于ListproductService类中。因此，在组件模板中使用它时，您需要通过以下方式引用它：

{{ _listProduct.checkfromservice }}

这样做的原因是模板代码的范围，它所属的组件的范围。因此，如果要直接在组件中声明checkfromservice，则可以按照您的方式直接在模板中引用。

Answer 2

如上所述，

您可以使用servicename.variableNameInService从组件访问服务中的变量

请检查我创建的示例 https://stackblitz.com/edit/ionic-yfbtxb 以检查此方案。

Answer 3

若要保留"MVC"概念，不应直接在 HTML 模板中调用服务。

从服务获取变量的更简洁的方法是在返回_listProduct.checkfromservice的控制器中创建公共函数。