javascript - 使用ng-repeat和angularjs对大型API中的项目进行迭代，我的API可以正常使用，但是不会获取结果吗？(Iteration through items in a large API using ng-repeat with angularjs, my API is working, but results won't be fetched?)

Question

I am working on quite a big fetch from a public API with hearthstone cards, The problem I am facing is that the ng-repeat does not seem to be responding, it gives me:(我正在使用带有炉石卡的公共API进行大量获取，我面临的问题是ng-repeat似乎没有响应，这给了我：)

<!-- ngRepeat: item in data --> In the HTML code, and the HTML code inside the ul tag is not showing up at all.(在HTML代码中，并且ul标记内的HTML代码根本没有显示。) Index.html: (The corresponding part of the HTML document.)(Index.html： （HTML文档的相应部分。）) <ul> <li ng-repeat="item in data"> <div class="col-xs-12 col-md-16"> <div class="prod-info-main prod-wrap clearfix"> <div class="row"> <div class="col-md-7 col-sm-12 col-xs-12"> <div class="product-deatil"> <p class="price-container"> <span>{{item.Basic.cardId}}</span> </p> </div> </div> </div> </div> </div> </li> </ul> Controller:(控制器：) var produkterControllers = angular.module('produkterControllers', []); // Skapar kontrollen produktController som h?mtar data fr?n js/data.json produkterControllers.controller('minApiFunktionController', function myController($scope, $http) { fetch("https://omgvamp-hearthstone-v1.p.rapidapi.com/cards", { "method": "GET", "headers": { "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com", "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40" } }) .then(function (response) { return response.json(); }).then(function (data) { console.log('this is the data, ', data); $scope.cards = data; }); }); I have disabled the service worker and all extra functionality to not disrupt with loading time for the API, but it seems that the HTML document completes the loading time before the API fetch is complete, and therefore it is not showing.(我已禁用服务工作者，并且所有其他功能都不得中断API的加载时间，但似乎HTML文档已在API提取完成之前完成了加载时间，因此未显示。) This is my thought but after a lot of looking through the docs I am stuck at this point, What am I missing?(这是我的想法，但是在仔细阅读了文档之后，我被困在这里，我缺少了什么？)   ask by Joakim Engqvist translate from so

Answer 1

The ES6 promises returned by the Fetch API are not integrated with the AngulurJS framework.(Fetch API返回的ES6承诺未与AngulurJS框架集成。)

Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.(只有在AngularJS执行上下文中应用的操作才能从AngularJS数据绑定，异常处理，属性监视等中受益。) Use $q.when to convert the ES6 promise to an AngularJS promise:(使用$q.when将ES6承诺转换为AngularJS承诺：) var produkterControllers = angular.module('produkterControllers', []); // Skapar kontrollen produktController som h?mtar data fr?n js/data.json produkterControllers.controller('minApiFunktionController', function myController($scope, $http, $q) { var fetchPromise = fetch("https://omgvamp-hearthstone-v1.p.rapidapi.com/cards", { "method": "GET", "headers": { "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com", "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40" } }) var angularPromise = $q.when(fetchPromise); angularPromise.then(function (response) { return response.json(); }).then(function (data) { console.log('this is the data, ', data); $scope.cards = data; }); }); The $q.when method wraps an object that might be a value or a (3rd party) then-able promise into a $q promise.($q.when方法将可能是值或第三方可承诺的对象包装到$q承诺中。) This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.(当您处理可能是或可能不是承诺的对象时，或者如果承诺来自无法信任的来源时，这很有用。) For more information, see(有关更多信息，请参见) AngularJS $q Service API Reference - $q.when(AngularJS $ q服务API参考-$ q.when) Update(更新资料) Be sure to use the right variable in the ng-repeat :(确保在ng-repeat使用正确的变量：) ?<?l?i? ?n?g?-?r?e?p?e?a?t?=?"?i?t?e?m? ?i?n? ?d?a?t?a?"?>? <li ng-repeat="item in cards">