angular - 错误是 ERROR TypeError: Cannot read property 'FirstName' of undefined
问题描述
我正在学习角度。在这里,我将人口统计组件作为一个标签,它将在个人组件中使用。它向我显示错误人口统计.component.html:3 错误类型错误:无法读取未定义的属性“名字”
如果有人想解决它,我已将其上传到 stackblitz 链接是
https://stackblitz.com/edit/angular- 6uhfoz
人.json
{
"Demographics" : {
"ProfileId":1,
"FirstName":"vinit"
}
}
人口统计.component.ts
import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { PersonListService,Person} from './person-list.service';
@Component({
moduleId: module.id,
selector: 'sd-demographic',
templateUrl: 'demographic.component.html',
styleUrls: ['demographic.component.css']
})
export class DemographicComponent implements OnInit {
errorMessage: string;
persons: Person;
constructor(public personListService:PersonListService){}
ngOnInit() {
// console.log(jwt.AuthConfig);
this.getperson();
}
getperson(){
this.personListService.getDemographic()
.subscribe(
resp => this.persons = resp.Persons,
//resp => this.addresses = resp.Addresses,
error => this.errorMessage = <any>error
);
}
}
人口统计.component.html
<ul>
<li><b>Demographics</b></li>
<li>FirstName:{{ persons.FirstName }}</li>
</ul>
人.组件.ts
import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { PersonListService} from './person-list.service';
/**
* This class represents the lazy loaded PersonComponent.
*/
@Component({
moduleId: module.id,
selector: 'sd-person',
templateUrl: 'person.component.html',
styleUrls: ['person.component.css']
})
export class PersonComponent implements OnInit {
/*errorMessage: string;
*/
constructor(public personListService:PersonListService){}
ngOnInit() {
// console.log(jwt.AuthConfig);
//this.getperson();
}
}
人员列表.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// import 'rxjs/add/operator/do'; // for debugging
export class Person{
ProfileId:number;
FirstName:string="";
}
}
/**
* This class provides the NameList service with methods to read names and add names.
*/
@Injectable()
export class PersonListService {
/**
* Creates a new NameListService with the injected HttpClient.
* @param {HttpClient} http - The injected HttpClient.
* @constructor
*/
constructor(private http: HttpClient) {}
/**
* Returns an Observable for the HTTP GET request for the JSON resource.
* @return {string[]} The Observable for the HTTP request.
*/
getDemographic(): Observable<{Persons: Person}>{
console.log("Inside the get service")
return this.http.get('app/person/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
person.component.html
<p-tabView>
<p-tabPanel header="Demographics">
<sd-demographic></sd-demographic>
</p-tabPanel>
</p-tabView>
解决方案
<ul>
<li><b>Demographics</b></li>
<li>FirstName:{{ persons.FirstName }}</li>
</ul>
当角度初始化您的模板时,人员仍然未定义,直到执行以下操作:
getperson(){
this.personListService.getDemographic()
.subscribe(
resp => this.persons = resp.Persons,
//resp => this.addresses = resp.Addresses,
error => this.errorMessage = <any>error
);
}
由于 HTTP 它是异步的人将被解析,直到 get 完成并且您的模板将能够显示它。
您需要做的是在模板上使用安全运算符或 ngIf。
<ul>
<li><b>Demographics</b></li>
<li>FirstName:{{ persons?.FirstName }}</li>
</ul>
或者
<ul *ngIf="persons">
<li><b>Demographics</b></li>
<li>FirstName:{{ persons?.FirstName }}</li>
</ul>
推荐阅读
- r - 我想在 R 中使用函数“sam”来比较两个光谱并检测差异,但我收到一条错误消息
- reactjs - 在 node_modules/jest-diff/build/diffLines.d.ts 中构建时出现 React + Typescript 错误
- java - 在 JPA 中使用 Postgresql lpad 函数,但无法执行
- javascript - 在 Tone.js 中将音频样本量化为网格
- javascript - 在 npm create-react-app 之后立即运行测试非常慢
- haskell - Haskell:我已经解释过的模式会出现非详尽模式错误
- angular - 角火库;查询参数的最佳实践
- java - Apache Flink - 外部 Jar
- javascript - 如何重定向到另一个页面并在Angular ng-click上调用一个函数
- sql - 将 int 拆分为时间格式