我创建了以下服务和组件来获取JSON对象并在HTML中打印。当我尝试在html bind中打印JSON数据的键时,它会给出正确的结果,但是Console显示错误,说“无法读取未定义的属性'数据'”
Service.ts
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from "rxjs";
import "rxjs/Rx";
import {JsoncallItem} from "./jsoncall-item";
@Injectable({
providedIn: 'root'
})
export class ApiService {
private postsURL ="http://myapp/browse/all/all";
constructor(private http: HttpClient ) {}
getPosts(): Observable<JsoncallItem[]>{
return this.http.get<JsoncallItem[]>(this.postsURL);
}
}
component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from "./../search.service";
import { JsoncallItem } from "./../jsoncall-item";
import { error } from 'util';
import { SearchtermPipe } from './../searchterm.pipe';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
title = 'app';
_postsArray: JsoncallItem[];
constructor(private apiSerivce: ApiService){}
getPosts(): void {
this.apiSerivce.getPosts().
subscribe(
resultArray => this._postsArray = resultArray
)
//error => console.log("Error :: " + error ))
}
ngOnInit(): void{
this.getPosts();
}
}
component.html
<p> {{_postsArray["data"]|json}} </p>
browse / all / all ==> JSON文件
{
A:1,
B:2,
C:3,
data:
[
{D:4},
{E:5},
{F:6}
]
}
在获得正确输出的同时在控制台中接收该错误的原因是什么?
您收到此错误,因为值_postsArray
在开头是undefined
,直到其值异步加载。您可以通过将模板更改为以下内容来避免看到此错误:
<p> {{_postsArray && _postsArray["data"]|json}} </p>
这样,在显示数据之前,首先检查_postsArray
是否未定义(真实)。
您收到错误的原因是您的JSON文件或组件模板的文件中存在拼写错误。
在您的JSON文件中,您将data
拼写为Data
。解决方案是将组件模板中的data
属性重命名为Data
,或者将JSON文件中的Data
属性重命名为data
。
附:在打开新问题之前,请检查您的房产命名。
你应该用* ngIf检查你的HTML。
<p *ngIf="_postsArray">{{_postsArray["data"]|json}} </p>
尝试使用像* ngIf这样的结构指令来检查http请求是否在显示之前返回了数据。
<p *ngIf="_postsArray"> {{_postsArray["data"]|json}} </p>
还有其他更好的选择,例如使用异步管道和* ngIf:https://angular.io/guide/pipes#the-impure-asyncpipe
尝试检查null和undefined条件,以避免在所有情况下出错
<p *ngIf="_postsArray!=null&&_postsArray!=undefined">
{{_postsArray["data"]|json}} </p>