У меня есть данные для меня, которые работают отлично
рабочие данные
data: Array(16)
Данные, которые НЕ работают, похожи на
data: Menu1Items: Array(5) > 0 {.... } etc
Я использую Angular 5, и поэтому службы возвращают данные, подобные этому
.map((response: Response) => {
return response;
Затем компонент перехватывает его, и console.log отлично работает
this.arsSevice.getMenu()
.subscribe(
result => {
this.testing = result;
console.log('menu',result);
})
проблема с данными, этот скриншот показывает проблему, я просто не понимаю, как ее исправить с помощью объекта vs array?
ТОЛЬКО сообщение об ошибке из-за HTML TEMPLATE
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Шаблон HTML
<li *ngFor="let item of testing">
Изображение, показывающее, что вызов, который похож в архитектуре с html-контуром шаблона, компонентом, службой, является рабочим BOTTOM, component
замечает разные по сравнению с тем, что называется menu
которым у меня возникают проблемы?
Я думаю, вам нужно установить test = result.data и повторить это.
this.arsSevice.getMenu()
.subscribe(
result => {
this.testing = result.data;
})
это даст вам доступ к массиву в 'data'
Я попытался изменить форму данных, и это сработало для меня. Надеюсь, это сработает для вас...
var data={
menu1Items:[{key:"boo", key2:"hoo"}],
menu2Items:[{key:"boo2", key2:"hoo2"}]
}
var tempData:any[]=[];
for(var key in data){
if(data.hasOwnProperty(key)){
tempData.push(data[key]);
}
}
this.data = tempData;
}
В вашем шаблоне:
<ul *ngFor="let menu of data ">
<li>
<ng-container *ngFor="let menuItem of menu">
{{menuItem.key}} / {{ menuItem.key2}}
</ng-container>
</li>
</ul>
С помощью HttpClient угловой автоматически анализирует ответ на объект. Он не знает, какой тип объекта есть, поэтому он просто нормальный объект, который не знает его свойства массива.
Это потому, что в то время как HttpClient проанализировал ответ JSON в Object, он не знает, какова форма этого объекта.
Но вы можете сказать, какой тип возвращаемого объекта является таким, чтобы он был правильно отображен. Например, если вы вернете массив строк, вы можете сделать что-то подобное.
return this.http.get<string[]>(apiUrl)
Вы можете прочитать больше здесь, они описывают подобную проблему, только с немного другой структурой.