Angular 从 $http 更新数组后视图未刷新

Question

我有以下代码使用 ng-repeat 显示 table 数据，最初模型（数组）将没有数据，但根据 api 的请求它会收到一些数据我正在尝试更新我的模型，但不幸的是我的视图没有随着模型更新而刷新，尽管我看到我的模型包含从 api 调用收到的新数据。

组件代码：

app.component('fooList', {
    bindings: {
        foo: '<'
    },
    templateUrl: '/app/foo.html',
    controllerAs: 'list',
    controller: function ($http,$scope) {
        let list=this;
        list.search=()=>{           
            $http.get('/ui/foo/'+ list.searchCriteria)
                 .success(response=>{
                     list.foo.searchResults=response.searchResults;
                 })
        }
    }
});

HTML 查看：

<tr ng-repeat="foo in ::list.foo.searchResults">
        <td>{{::foo.name}}</td>
        <td>{{::foo.address}}</td>
    </tr>

到目前为止我已经尝试了以下方法但没有帮助

最初将 list.foo.searchResults 设置为未定义，这是第一次工作正常，但如果我再次发送不同的搜索条件，则它不会刷新。
$scope.$apply()，我讨厌这样做，但尝试过它正在抛出 digest in progress 错误。
在 $http 成功的情况下，我尝试了下面的代码 list.foo.searchResults=0; list.foo.searchResults.push.apply(list.foo.searchResults,response.searchResults);
再创建一个子组件并将我的 html 替换为子模板并将代码移动到该组件中以填充数组。

非常感谢任何帮助。

Answer 1

尝试删除 :: 或者你能提供一个 jsfiddle 来处理

Answer 2

您必须删除一次性数据绑定。

<tr ng-repeat="foo in list.foo.searchResults">
    <td>{{foo.name}}</td>
    <td>{{foo.address}}</td>
</tr>

Answer 3

::是用来提供一种数据绑定方式，请先去掉再试试

::如果您正在使用它，即使您的模型正在更新，它也不允许更新视图。

Answer 4

您可以尝试在从服务中获取数据时在视图部分进行更新，在您的控制器部分使用 $scope.$apply()，您正在获取价值来自服务（表示存储在数组中）。

或从您的 html 部分中删除 :: 因为它在 angularjs.

中提供了一种绑定方式

Angular 从 $http 更新数组后视图未刷新

Angular view not refreshing after the array updates from $http

angularjs

angular-components