承諾後綁定數據

我有一個包含激活/停用用戶按鈕的表。當我點擊該按鈕時，它會進行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; 
      }); 
     }); 
    }; 
}

來源

2017-04-07 Ron T

成功的API調用後，你爲什麼刷新整個表？您應更新給定ID爲 –

的帳戶對象，不要使用'this'，因爲它的上下文更改取決於調用哪個函數。您應該爲'this'創建一個別名（例如'var controller = this;'然後在回調'controller.account = data'中），或者使用ES6 Arrow函數或'.bind（）' – Claies

[如何在回調中訪問正確的\'this'？]（http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback） – Claies

這裏是修復我的問題。請讓我知道是否有比這更好的方法。

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

來源

2017-04-07 05:51:10

承諾後綁定數據

回答

相關問題