AngularJS, вложенный массив - PullRequest
Новая
       6

AngularJS, вложенный массив

0 голосов
/ 11 мая 2018

У меня проблема с ng-repeat в AngularJs.У меня есть массив объектов с 3 различными ключами, и один из этих ключей является массивом объектов.Поэтому я просто использую ng-repeat для основного массива следующим образом: 

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

Все в порядке.Но когда я использую вложенный ng-repeat в этом цикле, я ничего не получаю.Я использовал раньше вложенный ng-repeat много и не столкнулся с проблемой.Вот код: 

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.

Где моя ошибка?

Ответы [ 3 ]

0 голосов
/ 11 мая 2018

Первая ошибка, которую я заметил в вашем коде, это 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;
  }

изменить на объект на на объект

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

0 голосов
/ 13 мая 2018

Проверьте демо,

DEMO 

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>
0 голосов
/ 11 мая 2018

Try 

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

comment[3] означает, что comment является массивом, и вы пытаетесь получить доступ к элементу 4th .Аналогичным образом измените и другие варианты использования.

Обновление 1

Проверьте этот plunkr .Ниже были ваши проблемы:

  1. Использование totoObject

  2. В вашем вопросе вы предоставили массив объектов (ниже кода), который нене тот случай в вашем 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"
  }
...