javascript - 在重新创建数组之前清除数组，以在数据刷新或重新加载时停止 Angular HTML SELECT 中的重复下拉选项

Question

我遇到一个问题，当我刷新数据时(基本上是重新调用创建数组的方法)，我的Angular 数组项会重复，因为它添加了与预先存在的数组相同的项目。

当我在帐户之间切换时，会发生这种情况，方法是选择 <select> 中的下拉帐户 ID 之一。 .

这是我更改帐户/个人资料的 HTML 代码:

<div ng-show="showSelectTwitterAccounts">
    <div>
        <div id="DropDownBox">
            <label for="ViewTwitterProfile">Select Twitter Profile: </label>
            <select ng-change="changeTwitterProfile()" ng-model="selectedTwitterProfileID" id="ViewTwitterProfile" ng-options="channelID for channelID in twitterChannels"></select>
        </div>
    </div>
</div>

这是我的 Controller 中创建配置文件 ID 数组的方法:

function getChannelProfiles() {

    $scope.showSelectTwitterAccounts = true;

    GetUserAccessService.returnBrandProfileID().then(function (brandProfileID) {

        SocialMediaUserService.channelProfiles().then(function (channelProfiles) {

            channelProfiles.forEach(function (channel) {

                if (channel.brand_profile_id === brandProfileID && channel.channel_type === 'twitter') {

                    $scope.twitterChannels.push(channel.id);
                }
            });
            console.log($scope.twitterChannels);
        });
    });
}

这是我切换帐户时调用的方法:

$scope.changeTwitterProfile = function () {

    $scope.dataModel = DataModelService.showDataLoadingAnimation();

    $scope.twitterPageMetrics = {};

    $scope.dataContent = false;

    $scope.showSelectTwitterAccounts = true;

    var twitterID = $scope.selectedTwitterProfileID;

    GetFusionDataService.getItems(getRequestURL(twitterID))

      .success(function (data) {
          handleDataRetrievalSuccess(data);
          getChannelProfiles();

      })

      .error(function (error, status) {
          handleDataRetrievalError(error, status);
      });

};

我明白为什么会发生重复。数组没有被清除，我不断地将相同的ID插入数组。

我尝试了几个选项来阻止这种情况，例如添加

$scope.twitterChannels = []; 

在我创建 View 的方法中。这会按预期将数组设置为空数组，并且会重新创建该数组，且不会出现重复项。

但是，当我调用我的 $scope.changeTwitterProfile 时方法，一切都按计划进行，直到再次创建数组为止。数组被清空，数据调用检索数据来过滤数组，但是在数据返回之前，系统进入了我的$scope.changeTwitterProfile方法，此时数组仍然是空的，没有找到配置文件。之后，数组将按其应有的方式创建。

对冗长的解释表示歉意 - 我只是想弄清楚我已经尝试过什么以及发生了什么。

非常感谢您的帮助。

Answer 1

据我了解，您正在清除代表选择框选项的 id 数组。

以下是您采取的步骤

1. 清除数组进行 $http 调用。
2. 有两个 $http 服务调用
3. 用新元素填充数组

您暂时看不到下拉列表的原因是因为 Angular 在 $http promise 完成后运行摘要周期。在您的情况下，它会在您的第一个 promise GetUserAccessService.returnBrandProfileID() 履行并且您的第二个 promise SocialMediaUserService.channelProfiles() 尚未履行时运行。

有两种方法可以解决这个问题。

1. 不要在 $scope.twitterChannels.push(channel.id) 中推送相同的元素
2. 第二个 promise 时清除 $scope.twitterChannelsSocialMediaUserService.channelProfiles() 已实现[在其解析函数中]。