Angular2 - 使用 Promises 更改模型数据

Question

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

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

我怀疑答案在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;