Итерация массива JSON в Angular5 с помощью ngFor
Я использую Angular5 для создания проекта. Я застрял в *ngFor.
У меня есть класс модели, как показано ниже:
export class FetchApi {
value: Array<String>;
api_status: string;
api_version: string;
data: Array<String>;
}
Мой component.ts получает данные от службы, которая вызывает API и извлекает данные.
Мой сервисный код:
public getUsers() {
console.info("heyyy"+this.fetchUrl);
return this.http.get <FetchApi[]> (this.fetchUrl); }
Код моего компонента:
ngOnInit() {
const scope = this;
this.userService.getUsers()
.subscribe( data => {
this.fetchApi = of(data);
console.info(this.fetchApi)
//this.fetchApi = data;
});
};
Мой JSON, который возвращает API, выглядит следующим образом:
{
"api_status": "200",
"api_version": "1.0",
"data": {
"featured": [{
"id": 1,
"vid": "",
"uid": ,
"title": "",
"description": ""
}]
}
}
Я хочу отобразить ответ на своей HTML-странице с помощью <tr *ngFor = "let fetch-api of fetchApi ">, однако получаю сообщение об ошибке:
FetchApiComponent.html:22 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges (common.js:3121)
at checkAndUpdateDirectiveInline (core.js:8941)
at checkAndUpdateNodeInline (core.js:10209)
at checkAndUpdateNode (core.js:10171)
at debugCheckAndUpdateNode (core.js:10804)
at debugCheckDirectivesFn (core.js:10764)
at Object.eval [as updateDirectives] (FetchApiComponent.html:22)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)
Пожалуйста, дайте мне знать, что я делаю не так, поскольку я новичок в Angular5. Как я могу разместить свой массив JSON на моей HTML-странице.
Ответы 2
Ты должен написать
<tr *ngFor = "let fetchApi of fetchApi.data.featured">Так же, как For / loop должен выполняться в массиве, а fetchApi - объект
И затем вы можете показать свой массив json, как показано ниже
<tr *ngFor = "let fetchApi of fetchApi.data.featured">
<td>{{fetchApi | json}}</td>
</tr>И для печати Id сделать как показано ниже
<tr *ngFor = "let fetchApi of fetchApi.data.featured">
<td>{{fetchApi.id}}</td>
</tr>Что вы видите в консоли после console.info (this.fetchApi) в функции OnInit?
Я получаю JSON
Я знаю, что у вас есть json, что это за контент, вставьте его сюда
Observable {_isScalar: true, _subscribe: ƒ, value: {…}} value : api_status : "200" api_version : "1.0" data : featured : (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] latest : (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] top : (6) [{…}, {…}, {…}, {…}, {…}, {…}] __proto__ : Object __proto__ : Object _isScalar : true _subscribe : ƒ (subscriber) __proto__ : ObjectЯ сделал это: <tr *ngFor = "let fetch-api of fetchApi?.data?.featured">, и теперь ошибок нет, я не могу получить здесь значение id. <tr *ngFor = "let fetch-api of fetchApi?.data?.featured"> <td ></td> <td>{{fetch-api.id | json}}</td> <td></td> <td></td> </tr>
Я думаю, что вы не получаете истинного ответа от вашего сервера, и попробуйте удалить [] из FetchApi [] в вернуть this.http.get <FetchApi []> (this.fetchUrl); }
Я удалил [] и также удалил fetchApi?.data?.featured. Но все равно появляется та же ошибка: FetchApiComponent.html:22 ERROR TypeError: Cannot read property 'featured' of undefined at Object.eval [as updateDirectives] (FetchApiComponent.html:22)
Мне понравилось это: <tr *ngFor = "let fetch-api of fetchApi.value.data.featured"> <td ></td> <td> {{fetchApi | json}} </td> <td></td> <td></td> </tr> , и теперь я получаю полный JSON на странице, но с ошибкой Cannot read property 'value' of undefined на консоли, и когда я пытаюсь получить id, он показывает мне пустую страницу с той же ошибкой на консоли.
Нет, просто введите {{fetchApi | json}} в HTML и вставьте результат
удалить of () из this.fetchApi = of (данные);
Если я удаляю of, я получаю две ошибки Cannot read property 'data' of undefined и Cannot read property 'value' of undefined, и я не получаю JSON на странице. Я тоже сделал {{fetchApi | json}}. Появляется пустая страница.
Позвольте нам продолжить обсуждение в чате.
Вы должны сделать это в своем html, чтобы обработать ошибку в html
<tr *ngFor = "let fetch-api of fetchApi?.data?.featured">
В вашем машинописном тексте, например:
this.userService.getUsers()
.subscribe((data) => {
this.fetchApi = data;
console.info(this.fetchApi)
//this.fetchApi = data;
});
Надеюсь, это поможет вам !!!
@N Sharma пытается заменить код of(data) на data только потому, что он возвращает наблюдаемый.
Я сделал это и теперь получаю еще одну ошибку:
ERROR TypeError: Cannot read property 'featured' of undefined at Object.eval [as updateDirectives] (FetchApiComponent.html:22) at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756) at checkAndUpdateView (core.js:10153) at callViewAction (core.js:10394) at execComponentViewsAction (core.js:10336) at checkAndUpdateView (core.js:10159) at callViewAction (core.js:10394) at execEmbeddedViewsAction (core.js:10357) at checkAndUpdateView (core.js:10154) at callViewAction (core.js:103).