Question

我的第一个有角度的家庭作业，当我尝试将它们调用到我的html页面时，我无法将我在打字稿文件中创建的对象显示出来。我必须在某个地方或某个地方有一个小错字，但我已经玩了一个小时，我找不到它。任何帮助是极大的赞赏。

打字稿：

namespace myApp{
    angular.module("myApp", []);


    class MainController {

        public animal;

        constructor() {

            this.animal = [
                { id: 1, breed: "spaniel", foods: ["alpo", "bones", "cats"] },
                { id: 2, breed: "lab", foods: ["fish", "chicken", "cats"] },]
        }
         }
angular.module("myApp").controller("MainController", MainController);

和_Layout.cshtml

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
  <div class="container body-content">
        @RenderBody()
        <hr />

    </div>
    <div class="container" ng-controller="MainController as vm">
        <div class="col-md-6 col-md-6">
            <h1>{{animal}}</h1>
            <div>ng-repeat= "food in animal.foods"</div>
            {{foods}}

        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>

    <script src="~/FrontEnd/JS/app.js"></script>
</body>
</html>

Answer 1

试试这个，

<script>
    var myApp = angular.module("myApp",[]); // creating new module

    myApp.controller("MainController", function($scope){
        // initializing animals variable
        $scope.animals = [
                { id: 1, breed: "spaniel", foods: ["alpo", "bones", "cats"] },
                { id: 2, breed: "lab", foods: ["fish", "chicken", "cats"] }]; 
    });

</script>

你的HTML应该是，

<div class="container" ng-controller="MainController">
    <div class="col-md-6 col-md-6">
        <h1>Animals</h1>
        <!-- Loop your animals variable-->
        <div ng-repeat="animal in animals">
            <h1>{{animal.id}}</h1>
            <!-- Loop animal's food-->
            <p ng-repeat="food in animal.foods"></p>
        </div>
    </div>
</div>

请随意在这个问题上提出疑问。

我的第一个简单的角应用。对象未显示

1 个答案: