javascript - 承诺后绑定数据

Question

我有一个表，其中包含一个激活/停用用户的按钮。当我单击该按钮时，它会调用 API 来更改用户的状态。我遇到的问题是在 API 调用后使用视图执行实时更新。目前，我看到文本切换的唯一方法是刷新页面时。

这是我的Admin.html，当单击按钮时，按钮上的文本应在“活动”和“非活动”之间切换。

<tr ng-repeat="account in $ctrl.account">
  <td>{{account.FirstName}}</td>
  <td>{{account.LastName}}</td>
  <td class="text-center">
    <button class="btn btn-sm btn-active-status" ng-class="account.Active === true ? 'btn-info' : 'btn-danger'" ng-bind="account.Active === true ? 'Active' : 'Inactive'" ng-click="$ctrl.UpdateActiveStatus(account.Id, account.Active)"></button>
  </td>
</tr>

这是我的AdminController.js

app.component('admin', {
    templateUrl: 'Content/app/components/admin/Admin.html',
    controller: AdminController,
    bindings: {
        accounts: '='
    }
})

function AdminController(AccountService) {
    this.$onInit = function () {
        this.account = this.accounts;
    }

    this.UpdateActiveStatus = function (id, status) {
        var data = {
            Id: id,
            Active: !status
        };

        AccountService.UpdateActiveStatus(data).then(function (response) {
            AccountService.GetAccounts().then(function (data) {
                this.account = data;
            });
        });
    };
}

Answer 1

这是解决我的问题的方法。请让我知道是否有比这更好的方法。

function AdminController(AccountService) {
    var controller = this;
    this.$onInit = function () {
        controller.account = this.accounts;
    }

    this.UpdateActiveStatus = function (id, status) {
        var data = {
            Id: id,
            Active: !status
        };

        AccountService.UpdateActiveStatus(data).then(function (data) {
            for (var i = 0; i < controller.account.length; i++) {
                if (controller.account[i].Id === data.Id) {
                    controller.account[i].Active = data.Active;
                }
            }
        });
    };
}