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 пытается перебрать объект.
Значение опции - это объект с атрибутом '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>
Для справки: РАБОЧАЯ ДЕМО
Потому что вы пытаетесь показать
options
, который является объектом, и поэтому получаете эту ошибку.