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

问题描述 投票:-2回答:5

我创建了以下服务和组件来获取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}
   ]
}

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

angular
5个回答
1
投票

您收到此错误,因为值_postsArray在开头是undefined,直到其值异步加载。您可以通过将模板更改为以下内容来避免看到此错误:

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

这样,在显示数据之前,首先检查_postsArray是否未定义(真实)。


1
投票

您收到错误的原因是您的JSON文件或组件模板的文件中存在拼写错误。

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

附:在打开新问题之前,请检查您的房产命名。


1
投票

你应该用* ngIf检查你的HTML。

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

1
投票

尝试使用像* ngIf这样的结构指令来检查http请求是否在显示之前返回了数据。

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

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


1
投票

尝试检查null和undefined条件,以避免在所有情况下出错

<p *ngIf="_postsArray!=null&&_postsArray!=undefined">
{{_postsArray["data"]|json}} </p>
© www.soinside.com 2019 - 2024. All rights reserved.