AngularJS，嵌套数组答案

【问题标题】：AngularJS, Nested arrayAngularJS，嵌套数组
【发布时间】：2018-05-14 02:52:31
【问题描述】：

我对 AngularJs 中的 ng-repeat 有疑问。我有一个具有 3 个不同键的对象数组，其中一个键是对象数组。所以我只是将ng-repeat 用于主数组，如下所示：

<div class="post-content" ng-repeat="post in nfc.posts track by $index">
  ...
</div>

一切正常。但是当我在这个循环中使用嵌套的ng-repeat 时，我什么也得不到。我在嵌套ng-repeats 之前使用了很多并且没有遇到任何问题。代码如下：

comments:: {{post.comments}}
<div class="post-comment" ng-repeat="comment in post.comments">
  comment: {{comment}}
  <img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
  <p>
    <a href="" class="profile-link">{{comment[4] + ' ' + comment[5]}}</a> {{comment[6]}}
  </p>
</div>

comments:: {{post.comments}} 语句向我显示了内容，但ng-repeat 似乎无法正常工作。

浏览器控制台中的comments 对象示例在这里

Array(3)
0: {
    0: 10196,
    1: 10325,
    2: 62,
    3: 0,
    4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:96"
  }
1: {
    0: 10195,
    1: 10325,
    2: 50,
    3: 0,
    4: Sun Feb 18 2018 20: 15: 41 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:97"
  }
2: {
    0: 10194,
    1: 10325,
    2: 62,
    3: 0,
    4: Sat Feb 17 2018 12: 36: 39 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:98"
  }

这个数组是数组数组，我从API收到它后将它转换为对象数组。

我的错误在哪里？

【问题讨论】：

您的控制器中没有 totoObject(array) 函数，即使您没有从任何地方导入它。是不是搞错了？
是的，这是一个打字错误@ImranAhmadGhazali
你得到这个错误了吗？
很遗憾没有！@ShashankVivek
感谢您的提问。我向页面添加了一些加载，并且此代码没有任何更改！我认为这与 angularJs 中的生命周期和摘要有关。但我仍然不知道原因。 @ShashankVivek

标签： angularjs angularjs-ng-repeat

【解决方案1】：

我在您的代码中注意到的第一个错误是 totoObject(itm["arrays"]))

  $scope.posts.forEach(itm => (itm["comments"] = totoObject(itm["arrays"])));

您在 plunker 中提供的代码说

 function toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i) rv[i] = arr[i];
    return rv;
  }

将 totoObject 更改为 toObject

$scope.posts.forEach(itm => (itm["comments"] = toObject(itm["arrays"])));

【讨论】：

【解决方案2】：

试试

<img src="{{comment['3']}}" alt="" class="profile-photo-sm" />

comment[3] 表示 comment 是一个数组，您正在尝试访问 4th 元素。同样改变其他用途。

更新 1

Check this plunkr。以下是您的问题：

totoObject的使用
在您的问题中，您提供了对象数组（如下代码），而您的 plunkr 中并非如此。所以，comment[3] 可以正常工作。

这里（显示对象数组）

 0: {
    0: 10196,
    1: 10325,
    2: 62,
    3: 0,
    4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:96"
  }

【讨论】：

感谢您的回答。但是comment: {{comment}} 必须在那之前展示一些东西。对吗？
@Saeed.Ataee 你能用 Json 数据创建一个 plunkr 吗？一旦您能够看到 {{comment}}，我提供的答案也会有所帮助
请让这个 plunkr 工作plnkr.co/edit/n8oh66zfOxuhcRSjM5dY?p=preview
totoObject 是输入错误，我会在这里复制我的整个代码plnkr.co/edit/ZCUm0C78gOv7SZbtlBCr?p=preview
@Saeed.Ataee 你检查过你的 plunkr 了吗？你还没有包含 script.js 文件，你还没有添加和 <body> 标签。 IIFE 文件不完整。如果那是脚本，则将angular.module("app.user") 更改为angular.module("app.user",[])。也没有ng-app。创建一个完整的示例 1st 请让我知道

【解决方案3】：

查看演示，

演示

var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.nfc ={};
   $scope.nfc.posts = [
  {
    "Post": {
      "Name": "text",
      "Family": "text",
      "UserName": "text",
      "WorkPlace": "text",
      "UserImage": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
      "PPic": "~/Images/Post/1337305170502018211044.jpg",
      "DSC": "text",
      "CF": "text",
      "CN": "(Mediastinum)",
      "Rate": 0,
      "MentionPostID": 0,
      "FollowCount": 1,
      "UserID": 50,
      "Enable": 1,
      "UPID": 10325,
      "IsFollow": false,
      "IsRate": false,
      "IsFollowUser": true,
      "RegDate": "2018-02-10T21:30:44.000Z"
    },
    "PostComment": [
      [
        10196,
        10325,
        62,
        0,
        "2018-02-18T18:26:58.000Z",
        "text",
        "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "text",
        "text",
        "text"
      ],
      [
        10195,
        10325,
        50,
        0,
        "2018-02-18T16:45:41.000Z",
        "text",
        "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
        "text",
        "text",
        "text"
      ],
      [
        10194,
        10325,
        62,
        0,
        "2018-02-17T09:06:39.000Z",
        "text",
        "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "text",
        "text",
        "text"
      ]
    ],
    "newCommentText": "",
    "comments": [
      {
        "0": 10196,
        "1": 10325,
        "2": 62,
        "3": 0,
        "4": "2018-02-18T18:26:58.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "7": "text",
        "8": "text",
        "9": "text"
      },
      {
        "0": 10195,
        "1": 10325,
        "2": 50,
        "3": 0,
        "4": "2018-02-18T16:45:41.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
        "7": "text",
        "8": "text",
        "9": "text"
      },
      {
        "0": 10194,
        "1": 10325,
        "2": 62,
        "3": 0,
        "4": "2018-02-17T09:06:39.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "7": "ttt",
        "8": "ttt",
        "9": "ttt"
      }
    ]
  }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div class="post-content" ng-repeat="post in nfc.posts track by $index">
 <div class="post-comment" ng-repeat="comment in post.comments">
  <img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
  <p>
    <a href="" class="profile-link">{{comment[4] + ' ' + comment[5]}}</a> {{comment[6]}}
  </p>
</div>
</div>
</body>

【讨论】：