Question

我想在组件的模板中显示处理promise的结果。我尝试过使用zone.run，但这没有用。这是我的组成部分：

@Component({ selector: 'test' })
@View({ template:
`<div class="test">
  <p>Result: {{ result }}</p>
</div>`
})

export class Test {
  promise: Promise<string>;
  result: string;

  constructor(private _zone: NgZone) {

    // Process promise
    this._zone.run( function() {
      this.promise = new Promise(function(resolve, reject) { resolve("Hi there"); });
      this.promise.then(function(msg: string) { this.result = msg; });
    });
  }
}

运行时，模板不会更改。我尝试将zone.run放在then方法中，但是这给了一个错误。有什么想法吗？

Answer 1

有两个问题。首先，我从es6-promise导入Promise，这与已经可用的Promise类不同。感谢Eric Martinez搞清楚这一点。

第二个问题是这行代码：

this.promise.then(function(msg: string) { this.result = msg; });

这里的问题是，在function(...) {...}内，this并未引用封闭的Test对象。要解决此问题，需要使用fat-arrow表示法声明函数：

this.promise.then((msg: string) => { this.result = msg; });

另一个迷人的JavaScript琐事。

Answer 2

如果您想使用声明的函数：

...
this.promise.then(msg => this.doSomethig(msg));
}

doSomething(msg){
  this.msg = msg;
  //other stuff
}

在Angular2中使用Promise和Zones

2 个答案: