Вопросы Теги

Как выполнить итерацию через вложенные объекты JSON с помощью ngFor

Во всех вышеперечисленных случаях переменная правильно установлена, но неправильно прочитана! Правильный способ заключается в использовании двойных кавычек при ссылке на : 

echo "$var"

Это дает ожидаемое значение во всех приведенных примерах. Всегда указывайте ссылки на переменные!

Почему?

Если переменная некорректна, она будет:

  1. Превращаться разделение поля , где значение разбивается на несколько слов по пробелам (по умолчанию) : До: /* Foobar is free software */ После: /*, Foobar, is, free, software, */
  2. Каждое из этих слов будет претерпевать расширение pathname , где шаблоны расширяются в файлы сопоставления: Before: /* После: /bin, /boot, /dev, /etc, /home, ...
  3. Наконец все аргументы передаются в echo, который записывает их , разделенные одиночными пробелами , давая 
    /bin /boot /dev /etc /home Foobar is free software Desktop/ Downloads/
    вместо значения переменной.

Когда переменная цитируется:

  1. Подставлять его значение.
  2. Нет шага 2.

Вот почему вы всегда должны цитируйте все ссылки на переменные, если вы специально не требуете разделения слов и расширения имени пути. Инструменты, такие как shellcheck , помогут вам и будут предупреждать о недостающих котировках во всех случаях выше.

2
задан Ricardo Martin 13 July 2018 в 18:29
поделиться

3 ответа

У меня есть решение, но вам нужно изменить свой объект.

Вы должны переопределить метод toString для городов и имен в вашей модели: 

test= [{
    "id": "5b48bffc644fca001419769c",
    "names": [{
      "name": "bob",
      toString: function(){return this.name;}
    },
      {
        "name": "stan",
        toString: function(){return this.name;}
      }
    ],
    "cities": [{
      "city": "London",
      toString: function(){return this.city;}

    },
      {
        "city": "Madrid",
        toString: function(){return this.city;}

      }
    ]
  }];

Раздел HTML будет выглядеть так: 

<div *ngFor="let t of test">
  <p> {{t.id}}</p>
  <p> {{t.names.join(",")}}</p>
  <p> {{t.cities.join(",")}} </p>
</div>

Выход: 

5b48bffc644fca001419769c

bob,stan

London,Madrid
3
ответ дан Maxim Kasyanov 17 August 2018 в 12:18
поделиться
  • 1
    – Ricardo Martin 13 July 2018 в 18:33
  • 2
    Да, как я писал ранее, вы добавляете его двумя способами. После получения ответа или добавления в модель. Вы можете выполнить итерацию и добавить этот метод для всех элементов – Maxim Kasyanov 13 July 2018 в 18:35
  • 3
    @RicardoMartin Мне просто интересно ... как вы наконец изменили ответ API, чтобы добавить функцию toString? – lealceldeiro 13 July 2018 в 19:20
  • 4
    – Maxim Kasyanov 13 July 2018 в 19:21

Вам просто нужно использовать *ngFor , чтобы перебирать документы , а затем два *ngFor s для итерации по names и cities, подобные этому ( StackBlitz Demo ):

ts: 

  documents = [{
    "id": "5b48bffc644fca001419769c",
    "names": [{"name": "bob"},{"name": "stan"}],
    "cities": [{"city": "London"},{"city": "Madrid"}]
  },{
    "id": "5b48bffc644fca001419769cde",
    "names": [{"name": "Jon"},{"name": "Doe"}],
    "cities": [{"city": "Barcelona"},{"city": "Saragoza"}]
  }
  ];

html: 

<div *ngFor="let doc of documents; let last = last"> <!-- iterate over all documents, let last = last is optional -->
    <p>Id: {{doc.id}}</p>
     <!-- iterate over all names (n) for every document (doc) -->
    <p>Names: <span *ngFor="let n of doc.names; last as lastName">{{n.name}}{{lastName ? '': ','}} </span></p>
     <!-- iterate over all cities (c) for every document (doc) -->
    <p>Cities: <span *ngFor="let c of doc.cities; last as lastCity">{{c.city}}{{lastCity ? '': ','}} </span></p>
     <!-- optional , this will add a separator between documents-->
    <hr *ngIf="!last"/>
</div>

Выход:

1
ответ дан lealceldeiro 17 August 2018 в 12:18
поделиться

Предположим, что ваши данные documents не возникают проблемы с сервером, затем попробуйте этот код HTML ниже: 

 <div *ngFor="let d of documents">
  <p>Id: {{d.id}}</p>
  <p>Names: <span *ngFor="let dd of d.names">{{dd.name}},</span></p>
  <p>Cities: <span *ngFor="let dd of d.cities">{{dd.city}},</span></p>
</div>
2
ответ дан Lester 17 August 2018 в 12:18
поделиться
  • 1
    Это решение добавит запятую к последнему элементу. Результат посмотреть любит Имена: bob, stan, Города: Лондон, Мадрид, – Maxim Kasyanov 13 July 2018 в 18:38
Другие вопросы по тегам:

Похожие вопросы: