无法在 Angularjs 重复指令中显示 WEBAPI 数据

Posted 2023-04-13

技术标签:

【中文标题】无法在 Angularjs 重复指令中显示 WEBAPI 数据【英文标题】：Unable to display WEBAPI data in Angularjs repeat directive 【发布时间】：2019-07-22 06:59:11 【问题描述】：

有人可以在我的第一个 Angular 应用程序中帮助在 angularjs 重复指令中显示 webapi 数据吗？

我正在按预期从 WEBAPI 获取数据，如下所示

["FLAVOR_ID":"BES","FLAVOR_NAME":"BES","FLAVOR_ID":"BUN","FLAVOR_NAME":"BUN"]

API 控制器：

public class ItemMaintenanceController : ApiController
    
        ItemMaintenanceRepository itemRepository;
        public ItemMaintenanceController(ItemMaintenanceRepository _itemRepository)
        
            itemRepository = _itemRepository;
        

        [HttpGet]
        public IEnumerable<MA_Flavor> GetAllFlavors()
        
               return itemRepository.GetAllFlavors();

客户端.html：

<!DOCTYPE html>
<html>
<head>
    <title> Client</title>    
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script>
        alert("start");
        var app = angular.module("myapp", ['ngResource']);

        var controller = function ($scope, $resource)   // controller uses $resource, which is part of ngResource
            $scope.flavor = ;
            $scope.getFlavors = function () 
                alert("calling getflvors");
                var request = $resource("http://localhost:55762/api/ItemMaintenance/GetAllFlavors?Id=CMN");
                $scope.flavor = request.query();
            ;

            ////$scope.clear = function () 
            ////    $scope.flavor = ;
            ////    $scope.error = "";
            ////

            $scope.getFlavors();
            myapp.controller("ItemMaintenanceController", controller);

  </script>
    </head>
<body ng-app="contacts">
    <div ng-controller="ItemMaintenanceController">    

    <select ng-model="flavor">
        <option ng-repeat="fl in Flavor" value="fl.FLAVOR_NAME">fl.FLAVOR_NAME</option>
    </select>

    <h1>You selected: flavor.FLAVOR_NAME</h1>
</div>
</body>    
</html>

【问题讨论】：

angular.module 是 myapp，ng-app 是联系人，为了解决问题，我建议先搁置真正的问题，先使用硬编码数据，然后让 angular 应用程序先运行，然后再在 api 中获取数据。 【参考方案1】：

看起来 ng-controller、ng-module 和 ng-app 的名称有问题。尝试改变并希望它会奏效。

<body ng-app="contacts">
    <div ng-controller="ItemMaintenanceController"> 

<Script>
 var app = angular.module('contacts', []);

        // To fetch all falvors 
        app.controller("ItemMaintenanceController", function ($scope, $http) 

.....
...
</script>

【讨论】：

【参考方案2】：

我认为你很接近。根据你所拥有的，我认为这样的事情应该可行：

<select ng-model="selectedFlavorId">
    <option ng-repeat="fl in flavor" value="fl.FLAVOR_ID">fl.FLAVOR_NAME</option>
</select>

你的数据在$scope.flavor，我假设如果你调试它会是这样的：

$scope.flavor = ["FLAVOR_ID":"BES","FLAVOR_NAME":"BES","FLAVOR_ID":"BUN","FLAVOR_NAME":"BUN"]

您希望在值字段中使用 id，因为这是您需要知道您选择了哪个值的位。您在下拉菜单中看到的值应该是风味的名称。

当您选择某些东西时，该值将反映在模型中。

当我选择 selectedFlavorId 时，您会发现它填充在 $scope.selectedFlavorId 下。不要像刚才那样用所选值覆盖您的 API 数据。

selectedFlavorId 将为您提供所选项目的 ID，因此在此之后您需要更多代码才能从数据数组中获取该属性的名称。

【讨论】：

感谢您的回复。它不会进入脚本内部以显示第一个警报本身。不知道问题出在哪里... 在这种情况下，我会回到 Angular 网站，先学习如何让一个基本的应用程序正常工作，然后再担心 API 和如何显示数据。【参考方案3】：

您的代码中可能存在以下问题。

myapp

ng-app

contacts

flavor

flavors

ng-options

ng-model

我理解的request.query()会返回资源对象，所以有两个选项可以从查询中获取数据。更多详情你可以找到的资源here

var request = $resource("http://localhost:55762/api/ItemMaintenance/GetAllFlavors?Id=CMN");

选项 1

request.query(function(data) 
    $scope.flavor = data;
);

选项 2

request.query().$promise.then(function(data) 
   // success
   $scope.flavor = data;
, function(errResponse) 
   // fail
);

【讨论】：

以上是关于无法在 Angularjs 重复指令中显示 WEBAPI 数据的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS - 无法在链接函数中动态更改指令模板

angularjs指令中link方法无法正确获取element

AngularJS：Datepicker 指令如何在占位符中有今天的日期

AngularJS指令元素方法绑定-TypeError：无法使用'in'运算符在1中搜索'functionName'

AngularJS - 无法使用指令在 ng-model 中引用 $index

如何在使用 AngularJS/Web API/Angular-ui-router 的指令中调用 $http.put 服务后更新页面