Question

我正在尝试使用Angular2（没有Angular1的经验），我已成功使用数据绑定，但我现在想在混合中添加promises来模拟异步数据请求。在以下代码中，将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)
  }

}

模拟data.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;

Angular2 - 使用Promises更改模型数据

1 个答案: