Angular2 将服务数据与模型变量绑定

Question

我有一个名为 test 的 class，其中属性是数据。我如何将 home.showVar 与 test.data 绑定，这样当 test.data 更新时，home.showVar 也会更新（我想向用户显示列表）

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

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

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

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

Answer 1

基本上您需要在测试 class 中创建一个函数 return 某些东西或响应。然后在您的 class 中使用该 class 方法来获取更新的数据。然后分配给 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;
       });
    }
}

Post 更多代码这可能会更清楚您的问题。举例来说，我又发布了一个示例，希望这可以使用 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 您的测试 class 代码可能如下所示：

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

Angular2 将服务数据与模型变量绑定

Angular2 bind service data with model var

angular

angular2-services

angularjs-bindings