ОШИБКА Ошибка: невозможно найти другой поддерживающий объект «[объект объекта]» типа «объект». NgFor поддерживает привязку только к Iterables

onGetForm() {
  this.serverData.getData('questionnaire/Student Course Review')
    .subscribe(
       (response: Response) => {
          this.questionnaire = response.json();
          let key = Object.keys(this.questionnaire);
          for (let i = 0; i < key.length; i++) {
            this.currentQuestionsValue.push(this.questionnaire[key[i]])
          }
        },
        (error) => console.info('Form Error', error)
      )
  }

мой цикл html, Примечание: я просто хочу повторить

<form>
  <div *ngFor = "let data of currentQuestionsValue">
    <div *ngFor = "let d of data.items ">
      <strong> {{ d.sno }}). </strong>
      <span>{{ d.question}}</span>
      <div *ngFor = "let op of d.options">
        <label>
          <input type = "radio" name = "option">
          <span>{{ op }}</span>
        </label>
      </div>
    </div>
  </div>
</form>

Я получаю следующую ошибку при запуске цикла с данными json.

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Я хочу показать эти предметы. ОШИБКА Ошибка: невозможно найти другой поддерживающий объект «[объект объекта]» типа «объект». NgFor поддерживает привязку только к Iterables

Потому что вы пытаетесь показать options, который является объектом, и поэтому получаете эту ошибку.

The Hungry Dictator 02.05.2018 06:15
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
937
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это потому, что ваш второй цикл ngFor пытается перебрать объект.

Значение опции - это объект с атрибутом 'option1', 'option2' ...;

Таким образом, вы должны изменить это на массив, как вы.

this.questionnaire = response.json();
      let key = Object.keys(this.questionnaire);
      for (let i = 0; i < key.length; i++) {
        this.currentQuestionsValue.push(this.questionnaire[key[i]])
      }
for( let j = 0; j < this.currentQuestionsValue.length ; j++) {
      this.currentQuestionsValue[j].options =  Object.keys(this.currentQuestionsValue[j].options).map(i => options[i])
   }

Ответ принят как подходящий

Здесь options - это не array, это просто json object, из-за следующей строки вы получаете ошибку:

<div *ngFor = "let op of d.options">

Решение :

Component side :

objectKeys = Object.keys;

Template side :

<div *ngFor = "let key of objectKeys(d.options)">
    <label>
        <input type = "radio" name = "option">
        <span>{{ d.options[key] }}</span>
    </label>
</div>

Для справки: РАБОЧАЯ ДЕМО

Другие вопросы по теме