Question

我创建了以下服务和组件来获取JSON对象并在HTML中打印。当我尝试在html绑定中打印JSON数据键时，它给出正确的结果，但是控制台显示错误消息，提示“无法读取未定义的属性'data'”

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>

浏览/全部/全部==> JSON文件

{ 
  A:1,
  B:2,
  C:3,
  data: 
   [
   {D:4},
   {E:5},
   {F:6}
   ]
}

在获得正确输出的同时在控制台中收到该错误的原因是什么？

Answer 1

出现错误的原因是因为JSON文件或组件模板的文件中有错字。

在JSON文件中，您将data拼写为Data。解决方案是将组件模板中的data属性重命名为Data，或者将JSON文件中的Data属性重命名为data。

P.S。在打开新问题之前，请检查您的财产命名。

Answer 2

您会收到此错误，因为值_postsArray的开头是undefined，直到它的值被异步加载为止。您可以通过将模板更改为以下方式来避免看到此错误：

<p> {{_postsArray && _postsArray["data"]|json}} </p>

这样，您在显示数据之前首先检查_postsArray是否未定义（真实）。

Answer 3

您应该使用* ngIf检查您的html。

<p *ngIf="_postsArray">{{_postsArray["data"]|json}} </p>

Answer 4

尝试使用* ngIf之类的结构指令，以检查http请求在显示数据之前是否已返回数据。

<p *ngIf="_postsArray"> {{_postsArray["data"]|json}} </p>

还有其他更好的选择，例如结合使用异步管道和* ngIf：https://angular.io/guide/pipes#the-impure-asyncpipe

Answer 5

尝试同时检查null和undefined条件，以避免在所有情况下出现错误

<p *ngIf="_postsArray!=null&&_postsArray!=undefined">
{{_postsArray["data"]|json}} </p>

无法读取Angular中未定义的属性

5 个答案: