Angular2使用模型var绑定服务数据

时间:2016-02-14 06:47:52

标签: angular angular2-services angularjs-bindings

我有一个名为test的类,里面的属性是数据。如何将home.showVartest.data绑定,以便在更新test.data时,home.showVar也会更新(我想向用户显示列表)

基本上我想要有一个名为test的服务,它会触发api调用,然后返回数据并与现有数据合并,然后显示给用户。我是angular2和打字稿的新手。所以我不确定如何将http数据与现有数据合并,并使其与不同页面绑定。

export class test {
    public data = 'yes';
    constructor() { }
}

@Page({
    templateUrl: 'home.html'
})

export class Home {
    showVar;
    constructor(test: test) {
        this.showVar = test.data;
    }
}

1 个答案:

答案 0 :(得分:1)

基本上,您需要在测试类中创建一个返回某些内容或响应的函数。然后在你的类中使用该类方法来获取更新的数据。然后分配给showVar变量。希望它会对你有所帮助。

export class test {
    public data = 'yes';
    constructor() { }
     demo(){
        return this.data;
      }
}

@Page({
    templateUrl: 'home.html'
})

export class Home {
    showVar;
    constructor(private test: test) {
       this.test.demo(res=>{
          res= this.showVar;
       });
    }
}

发布更多代码可能会更清楚您的问题。仅举例来说,我已经发布了另一个例子,希望这可能更清楚,使用API​​调用这里是例子:

这是我的组件文件代码,就像您的home组件代码一样:

API_call() {
    let url_getApi = 'Path or URl here...'

    this.APIService.getData(url_getApi)
        .subscribe(res=> {
            if (res) {
                this.showVar= res;
                console.log(res, "Data from API call");
            }
        });
}

现在这里是服务文件(APIService.ts)代码i.r您的测试类代码可能如下所示:

getData(url) {
   return this.http.request(new Request(url, or RequestOptions as per need)
    .map(res => {
           return res.json();
        });
}