Question

我遇到类似angular component one-time binding from $http shows undefined的问题。

我在父组件中有一个异步调用：

this.SomeApi.getSomeData(params, (data) => {
    this.someDataList = data;
    console.log('getSomeData this.someDataList:', this.someDataList);
});

使用$ http：

getSomeData(params) {
    return this.$http.post(this.url + 'data_source/getSomeDataList', params)
    .then((data) => {
        if (data.status === 200) {
          callback(data.data);
          return data.data.someDataList;
        } else {
          return null;
        }
    });
}

console.log('getSomeData this.someDataList:', this.someDataList);从响应中返回数据，所以效果很好。

但是在子组件中，顺便说一句。具有这样的约束力：

bindings: {
    someBind1: '<',
    someBind2: '=',
    someDataList: '<?'
},

我有$ onChanges挂钩函数：

$onChanges(changesObj) {
  console.log('changesObj:', changesObj);
  if (changesObj.someDataList && changesObj.someDataList.currentValue) {
    this.someDataList = changesObj.someDataList.currentValue;
    console.log('$onChanges this.someDataList:', this.someDataList);
  }
}

第一个console.log显示以下内容：

{
  someBind1: SimpleChange {previousValue: UNINITIALIZED_VALUE, currentValue: {…}}
  someBind2: SimpleChange {previousValue: UNINITIALIZED_VALUE, currentValue: {…}}
  someDataList: SimpleChange {previousValue: UNINITIALIZED_VALUE, currentValue: undefined}
  __proto__: Object
}

秒显示以下内容：$onChanges this.someDataList: undefined

在此子组件的控制器初始化之前。

但是，在完成$ http响应之后，第二次调用$ onChanges时，传递的对象将从钩子内部的changesObj中消失，因此仅输出钩子内部的第一个console.log，而第二个从不输出。

我在github信息（$onChanges hook isn't working properly when using Promises #16480）的某处发现：

您发现的问题是本机Promise对AngularJS摘要循环不了解。您需要使用内置的AngularJS Promise库$ q。

但是，AngularJS $http service的官方文档中写道：

$ http API基于$ q服务公开的延迟/承诺API。[...]

因此，我的异步调用代码在理论上应该与摘要周期“同步”，并且不会出现此类问题，对吧？

即使在修改了上面发布的异步调用的代码以合并$ q之后，仍然没有任何作用，

getSomeData(params) {
    return this.$http.post(this.url + 'data_source/getSomeDataList', params)
        .then((data) => {
            if (data.status === 200) {
                return data.data.someDataList;
            } else {
                return null;
            }
        }
    );
}

this.$q.when(this.SomeApi.getSomeData(params)).then( (data) => {
    this.someDataList = data;
    console.log('getSomeData this.someDataList:', this.someDataList);
});

上面的代码与早期版本的代码相同，因此，打印响应后的第一个console.log可以看到数据，并且$ onChanges钩子中的第一个console.log可以打印以下内容：

{
  someBind1: SimpleChange {previousValue: UNINITIALIZED_VALUE, currentValue: {…}}
  someBind2: SimpleChange {previousValue: UNINITIALIZED_VALUE, currentValue: {…}}
  __proto__: Object
}

根本没有someDataList属性，因此钩子中的第二个console.log将永远不会被打印。

我不明白。

AngularJS组件可选的单向绑定，子组件的$ onChanges在$ http响应后获得未定义的值

0 个答案: