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的公共函数。

Answer 4

// text1 for different color text1 = "Upto 1Feet $"; // text 2 in different color String text2 = min_fare; span1 = new SpannableString(text1); // optional if you want to change text size span1.setSpan(new AbsoluteSizeSpan(textSize1), 0, text1.length(), SPAN_INCLUSIVE_INCLUSIVE); // code for changing color of string 1 span1.setSpan(new ForegroundColorSpan(ContextCompat.getColor(context, R.color.colorPrimary)), 0, text1.length(), 0); // do same for string two and concat both span CharSequence finalText = TextUtils.concat(span1, span2); txtEventType.setText(finalText);应该为你做的工作

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

4 个答案: