使用 ng-repeat 和 angularjs 迭代大型 API 中的项目，我的 API 工作正常，但不会获取结果？

Question

我正在使用炉石卡从公共 API 获取相当大的数据，我面临的问题是 ng-repeat 似乎没有响应，它给了我：

<!-- ngRepeat: item in data -->

在 HTML 代码中，ul 标签内的 HTML 代码根本没有显示出来。

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>

控制器：

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

我已经禁用了 service worker 和所有额外的功能，以免中断 API 的加载时间，但似乎 HTML 文档在 API 提取完成之前完成了加载时间，因此它没有显示。 这是我的想法，但经过大量查看文档后，我被困在这一点上，我错过了什么？

---

来自 API 的样本数据

data = {
    Basic: [
        {cardId: "GAME_004", dbfId: "1740", name: "AFK", /* ... */ },
        {cardId: "CS2_041e", dbfId: "1853", /* ... */ },
        {cardId: "HERO_09", dbfId: "813", name: "Anduin Wrynn", /* ... */ }, 
        {cardId: "EX1_399e", dbfId: "1621", name: "Berser", /* ... */ },
        //...
    ],
    Battlegrounds: [{…}, {…}, {…},...],
    Blackrock Mountain: [{…}, {…},...],
    //...
}
    

Answer 1

ES6 承诺不与 AngularJS 框架集成

Fetch API 返回的 ES6 承诺未与 AngularJS 框架集成。 只有在 AngularJS 执行上下文中应用的操作才能从 AngularJS 数据绑定、异常处理、属性监视等中受益。

使用$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;
    });    
});

$q.when方法将可能是值或（第 3 方）then-able promise 的对象包装到$q promise 中。 当您处理可能是也可能不是承诺的对象，或者如果承诺来自不可信的来源时，这很有用。

有关详细信息，请参阅

• AngularJS $q 服务 API 参考 - $q.when

---

更新

请务必在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">

Answer 2

使用$http服务

Fetch API 没有与 AngularJS 框架集成。 只有在 AngularJS 执行上下文中应用的操作才能从 AngularJS 数据绑定、异常处理、属性监视等中受益。

只需使用$http服务：

var url = "https://omgvamp-hearthstone-v1.p.rapidapi.com/cards";
var headers = {
    "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
    "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
};
var options = { headers };

$http.get(url, options)
  .then(function (response) {
    var data = response.data;
    console.log('this is the data, ', data);
    $scope.dataObj = data;
});

然后以正确匹配数据的方式使用ng-repeat ：

<div ng-repeat="(key, cardArr) in dataObj">
   <h2>{{key}}</h2>
   <ul>
     <li ng-repeat="card in cardArr track by card.dbfId">
        {{card.cardId}}: {{card.cardName}}
     </li>
   </ul>
</div>

Answer 3

我认为您必须在 html 中将数据更改为卡片：

<ul>
<li ng-repeat="item in cards">
    <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>

Answer 4

也许你只需要使用apply

此外，您的 html 是“数据中的项目”，角度变量是 $scope.cards