Angular2-使用Promise更改模型數據

Question

我正在嘗試Angular2（沒有Angular1的經驗），我成功地使用了數據綁定，但是現在我想向混合物中添加Promise，以模擬對數據的異步請求。 在下面的代碼中，將newData設置為對象文字可以正常工作，但是將其設置為現有的填充對象不起作用。

經過一天的嘗試，我需要一些幫助。 我正在尋找讓諾言返回一些數據並更新模板中插值的最簡單方法。 我已經讀過，有時會使用區域，但是目前，要將其保持在最低限度，以幫助我理解（因此，我從示例代碼中刪除了工廠類，接口和依賴項注入）

我懷疑答案是在此victorsavkin帖子中 ，但以我目前的理解水平，這超出了我。

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)
  }

}

模擬data.js

exports MockData = {
  name:'Nancy'
}

Answer 1

我對您的助聽器做了以下兩項更改，以使其正常工作：

export var MockData = {
  name:'Brian'
}

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

新的朋克 。

如果您使用Elvis運算符 （？。），也不必初始化data屬性：

Hello {{data?.name}}

然后在您的組件中：

public data;