AngularJs表在创建/删除/更新后没有更新

AngularJs Table not updated after Create/Delete/update

本文关键字:更新 删除 创建 AngularJs      更新时间:2023-09-26

如果我在数组中创建/更新/删除值,ng表不会更新数据。我需要做一个窗口。位置。reload(),但这不是很"漂亮"。难道在Angularjs中不应该通过2Way数据绑定和自动的$apply循环来完成吗?
也许我忘记了一些东西:

'use strict';
(function() {
  class TranslationsComponent {
    constructor($http, $scope, $uibModal) {
        this.$http = $http;
        this.$scope = $scope;
        this.$uibModal = $uibModal;
        this.langV = [];
      }
  $onInit() {// getting my Datas
        this.$http.get('/api/dict_keys/all/' + 1 + '/' + 1)
          .then(response => {
            this.langV = response.data;
          });
    }
    // For Example Deleting something with a Modal
    // Delete Modal
    deleteKey(selectedKey) {
        this.$uibModal.open({
          scope: this.$scope,
          templateUrl: 'delete.html',
          controller: ['$scope', '$uibModalInstance', '$http', 'selectedKey',
            function($scope, $uibModalInstance, $http) {
              $scope.selectedKey = selectedKey;
              this.$http = $http;
              $scope.close = function() {
                $uibModalInstance.dismiss();
              };
              $scope.delete = () => {
                this.$http.delete('/api/dict_keys/' + selectedKey._id)
                  .then(() => {
                    //window.location.reload();
                    //what can i instead of realod do?
                    toastr.success('The Key is successfully Deleted');
                    $uibModalInstance.close(); 
                  });
              };
            }
          ],
          resolve: {
            selectedKey: () => selectedKey
          }
        });
      } 
  /* ----------------------------------------- */
  angular.module('euconDictionaryApp')
    .component('translations', {
      templateUrl: 'app/translations/translations.html',
      controller: TranslationsComponent
    });
})(); 

在我的。html中,它是一个简单的ng-repeat,显示所有内容,简而言之:

    <tr dir-paginate="v in $ctrl.langV |itemsPerPage: 10">
              <td>
               {{v.Name}}
              </td>
  <td>
            <!-- Delete Key Button -->
            <button type="button" class="btn btn-default" ng-click="$ctrl.deleteKey(v)">
            </button>
          </td>

看起来你需要更新'this。在删除或更新后查看langV'数组的更新。你可以使用javascript的splice方法从数组中删除一个项目。

删除后可以使用

this.langV.splice(this.langV.indexOf(v), 1)

更新后,您可以像

一样更新项
this.langV[index] = updateItem