Question

我的应用会返回一个＆＃39; card＆＃39;来自api的对象，并在UI上显示每个对象。

卡search.html

<div class="main-view container">
    <h1>Card Search</h1>

    <div id="card-search" ng-controller="cardSearchController">

            <form class="search-form">
               <p>Retrieve card information via name or multiverse ID</p>
                <input ng-model="cardInput" type="text" name="" value="">       
                <select ng-model="selectedItem" ng-options="item as item.label for item in items"></select>
                <button ng-click="getCard(cardInput)" type="button" name="button">Search</button>
            </form>

            <div class="container result-container">

                        <div ng-repeat="card in displayedCards" class="row display-row">
                            <div class="col-sm-6 card-display">
                                <img src={{card.imageUrl}} alt="">
                            </div>
                            <div class="col-sm-6 card-stat-display">
                                <p><strong>Name:</strong> {{card.name}}</p> 
                                <p><strong>Mana Cost:</strong> {{card.manaCost}}</p>
                                <p><strong>Converted Mana Cost:</strong> {{card.cmc}}</p>
                                <p><strong>Colors:</strong> {{card.colors}}</p>
                                <p><strong>Type:</strong> {{card.type}}</p>
                                <p><strong>Text:</strong> {{card.text}}</p>
                                <p><strong>Flavor Text:</strong> <i> {{card.flavor}}</i></p>
                                <p><strong>power:</strong> {{card.power}}</p>
                                <p><strong>Toughness:</strong> {{card.toughness}}</p>
                            </div>   

                        </div>
            </div>            
    </div>

所以这应该在cardDisplay中显示每张卡片，这是一个对象数组。

cardSearchController.js

angular.module('mainApp').controller('cardSearchController', function($scope, mainService) {

$scope.getCard = function(searchInput) {

    console.log('$scope.selectedItem.label', $scope.selectedItem.label)
    if ($scope.selectedItem.label === 'Search By Multiverse ID') {
        mainService.getCardById(searchInput).then(function(card){
            $scope.displayedCard = card;
        })
    }

    if ($scope.selectedItem.label === 'Search By Name') {
        var searchInput = searchInput.split(' ').join('+')
        mainService.getCardByName(searchInput).then(function(uniqueCards){
            console.log('unique cards in controller', uniqueCards);
            $scope.displayedCards = uniqueCards;
        })
    }

};

$scope.items = [
    {
        label: 'Search By Name'
    },
    {
        label: 'Search By Multiverse ID'
    }
]

});

这是控制器，我们试图显示的值是 uniqueCards。

service.js

angular.module('mainApp').service('mainService', function($http, 
$state) {


this.getCardByName = function(name) {
    console.log(11111, 'I am here');
    return $http({
        method: 'GET',
        url: 'https://api.magicthegathering.io/v1/cards?name=' + name + '&contains=imageUrl'
        }).then(function(response) {

            console.log(response.data);
            var returnedCards = response.data.cards;
            var uniqueCards = [];
            console.log('the contents of returned cards: ', returnedCards);

            for (var card of returnedCards) {
                var testedCard = card;
                var uniqueName = true;

                for (var uniqueCard of uniqueCards) {

                    if (testedCard.name === uniqueCard.name) {                            
                        uniqueName = false; 
                        break;
                    }
                }
                if (uniqueName) {
                    uniqueCards.push(testedCard);
                }
            }

            console.log('here are the unique cards: ', uniqueCards);
            return uniqueCards;

            }), 
            function (cards) {
                alert('An Error', cards);
            };
}

这是服务。 this.getCardByName应该将uniqueCards返回给控制器。

所以uniqueCards确实根据console.log制作，但控制器没有收到它。我还在加载mainService.getCardByName不是函数的页面时从开发控制台收到消息：

angular.js:14642 TypeError: mainService.getCardByName(...).then is not a function
at ChildScope.$scope.getCard (cardSearchController.js:14)
at fn (eval at compile (angular.js:15500), <anonymous>:4:223)
at callback (angular.js:27285)
at ChildScope.$eval (angular.js:18372)
at ChildScope.$apply (angular.js:18472)
at HTMLButtonElement.<anonymous> (angular.js:27290)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

调用getCardByName表示它尚未定义，但它的脚本标记位于index.html中。

Answer 1

它并不是说getCardByName不是一个函数，它说getCardByName.then（）不是一个函数。您已经在mainService中执行了.then（）

应用程序的service.js中的API调用未被推送到页面控制器

1 个答案: