时间戳

首页 > 解决方案 > AngularJS 承诺在下一次用户交互之前不会更新 GUI

javascript - AngularJS 承诺在下一次用户交互之前不会更新 GUI

问题描述

我在 AngularJS 中使用 Angular2 风格的组件。在我的组件中，我有一个函数旨在通过更改下拉选项来更新 GUI：

    var ctrl = this;
    async function updateOptions(node) {
          var name = node.name;
          let result = await MyService.getResult(name);
          ctrl.options = result;
          console.log(ctrl.options); 
    }

显示这些选项的相应 HTML 是：

  <select ng-if="$ctrl.getType() === 'dropdown'"
    class="form-control selectList"
    ng-model="$ctrl.value"
    ng-options="option.key as option.displayName for option in $ctrl.options">
  </select>

哪里getType()总是返回'dropdown'。

下拉列表开始为空白。用户从下拉列表中选择一个选项。控制台会正确记录选项和下拉列表更新。用户从下拉列表中选择另一个选项。控制台再次正确记录选项。但是这一次，下拉列表没有更新。随后的所有时间，下拉菜单都会显示用户选择的上一个事物的选项。

期待一些好的侦探作品。很高兴从这个大型项目中提供更多代码片段。我想知道这是否可能是 AngularJS 更新方式的问题。

更新：

我的服务代码：

this.getResult = function(name) {
  return myFactory.getStuff(name).then(
    function(response) {
      return response.result.map(...);
    }
  );
};

我的工厂代码：

myFactory.getStuff = function(name) {
  return $http.get('/url/here/' + name)).then(
      function(response) {
        return response.data;
      }
    );
};

标签： javascriptangularjs

解决方案

await用于浏览器支持的本机承诺。您还可以.then在原生 Promise 上使用语法。

但是 AngularJS 使用它自己的来自$q服务的承诺。因此，您需要使用.then语法，因为浏览器不知道这些承诺。

当您使用$q服务中的承诺时（例如，当您使用 时$http），您不必担心摘要周期，因为在履行承诺时会为您运行摘要。但是如果你在 AngularJS 中使用原生 Promise，你通常必须手动运行一个摘要循环。

推荐阅读