javascript - Angular2 - 使用 Promises 更改模型数据

Question

我正在试验 Angular2(没有 Angular1 的经验)，我已经成功地使用了数据绑定(bind)，但我现在想将 promise 添加到组合中以模拟对数据的异步请求。 在下面的代码中，将 newData 设置为对象字面量可以正常工作，但将其设置为现有的填充对象则不起作用。

尝试了一天多之后，我需要一些帮助。 我正在寻找让我的 promise 返回一些数据并让它更新模板中的内插值的最简单方法。我读过区域有时用于此目的，但目前，我想将其保持在最低限度，以帮助我理解(因此我从示例代码中删除了工厂类、接口(interface)和依赖项注入(inject))

我怀疑答案在 this victorsavkin post 中，但以我目前的理解水平，这超出了我的范围。

http://plnkr.co/edit/amLIZWe5UI9jlvpVGv9V?p=preview

import {Component} from 'angular2/core'
import {MockData} from './mock-data.ts'

@Component({
  selector: 'my-app',
  providers: [],
  template:`
    <h1>
    Hello {{data.name}}
    </h1>`,
  directives: []
})
export class App {
  public data = {}

  constructor() {
    new Promise((response, reject) => {
      setTimeout(function() {
        newData = {name:'Sid'}      //works
        //newData = MockData        //doesn't work
        response(newData)  
      }, 1000)

    })
    .then(response => this.data = response)
  }

}

模拟数据.js

exports MockData = {
  name:'Nancy'
}

Answer 1

我对您的 plunker 进行了以下两项更改以使其正常工作:

export var MockData = {
  name:'Brian'
}

import {MockData} from '../mock-data.ts'

新plunker .

如果您使用 Elvis operator，您也不必初始化 data 属性(?.):

Hello {{data?.name}}

然后在你的组件中:

public data;