TypeError: Cannot read property 'commit' of undefined Angular
TypeError: Cannot read property 'commit' of undefined Angular
我有一个 Angular 项目,它从 Spring 启动项目中获取参数。在后面我有一个包含信息的 DTO,我从前面访问该信息以将其显示在屏幕上。当我显示带有信息的对话框时,它在控制台中显示错误 TypeError: Cannot read property 'commit' of undefined
,但它工作正常。
这是错误:
这是 about.component.html
:
<header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div fxFlexLayout="column" class="about-data">
<div>Commit: {{data.front.commit}}</div>
<div>Fecha: {{data.front.date}}</div>
<div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div fxFlexLayout="column" class="about-data">
<div>Commit: {{data.people.commit}}</div>
<div>Fecha: {{data.people.date}}</div>
<div>Versión: {{data.people.version}}</div>
</div>
这是about.component.ts
:
ngOnInit() {
this.http.get('/assets/build_info.txt', { responseType: 'text' }).subscribe((data: String) => {
let re: RegExp = new RegExp("^(Author|Date|commit|Version).*", "i");
let frontInfo: InfoDTO = data.split('\n').filter(l => re.test(l)).reduce((accum, line) => {
line = line.replace(":", " ");
let sepIndex = line.indexOf(' ');
let attr = line.substring(0, sepIndex).toLowerCase();
let value = line.substring(sepIndex).trim();
accum[attr] = value;
return accum;
}, new InfoDTO());
const ob1 = this.aboutService.aboutInfo();
ob1.subscribe((people: InfoDTO) => {
this.data = {
front: frontInfo,
people: InfoDTO
};
});
});
}
我找不到问题可能是什么,因为数据是正确的,我不知道是什么原因导致该错误。
您正在尝试显示尚未获取的数据。提取(以及订阅)是异步的,因此您的视图会在数据可用之前显示。
对此有多种解决方案,例如,您可以在视图中添加一个条件,例如:
<div *ngIf="data?.front">
... display your data here
</div>
data.people
也一样。根据您初始化 data
的方式,您甚至可以将整个代码包装在 *ngIf="data"
条件中。
因此,使用您的代码,它看起来像:
<header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div *ngIf="data?.front" fxFlexLayout="column" class="about-data">
<div>Commit: {{data.front.commit}}</div>
<div>Fecha: {{data.front.date}}</div>
<div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div *ngIf="data?.people" fxFlexLayout="column" class="about-data">
<div>Commit: {{data.people.commit}}</div>
<div>Fecha: {{data.people.date}}</div>
<div>Versión: {{data.people.version}}</div>
</div>
我有一个 Angular 项目,它从 Spring 启动项目中获取参数。在后面我有一个包含信息的 DTO,我从前面访问该信息以将其显示在屏幕上。当我显示带有信息的对话框时,它在控制台中显示错误 TypeError: Cannot read property 'commit' of undefined
,但它工作正常。
这是错误:
这是 about.component.html
:
<header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div fxFlexLayout="column" class="about-data">
<div>Commit: {{data.front.commit}}</div>
<div>Fecha: {{data.front.date}}</div>
<div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div fxFlexLayout="column" class="about-data">
<div>Commit: {{data.people.commit}}</div>
<div>Fecha: {{data.people.date}}</div>
<div>Versión: {{data.people.version}}</div>
</div>
这是about.component.ts
:
ngOnInit() {
this.http.get('/assets/build_info.txt', { responseType: 'text' }).subscribe((data: String) => {
let re: RegExp = new RegExp("^(Author|Date|commit|Version).*", "i");
let frontInfo: InfoDTO = data.split('\n').filter(l => re.test(l)).reduce((accum, line) => {
line = line.replace(":", " ");
let sepIndex = line.indexOf(' ');
let attr = line.substring(0, sepIndex).toLowerCase();
let value = line.substring(sepIndex).trim();
accum[attr] = value;
return accum;
}, new InfoDTO());
const ob1 = this.aboutService.aboutInfo();
ob1.subscribe((people: InfoDTO) => {
this.data = {
front: frontInfo,
people: InfoDTO
};
});
});
}
我找不到问题可能是什么,因为数据是正确的,我不知道是什么原因导致该错误。
您正在尝试显示尚未获取的数据。提取(以及订阅)是异步的,因此您的视图会在数据可用之前显示。
对此有多种解决方案,例如,您可以在视图中添加一个条件,例如:
<div *ngIf="data?.front">
... display your data here
</div>
data.people
也一样。根据您初始化 data
的方式,您甚至可以将整个代码包装在 *ngIf="data"
条件中。
因此,使用您的代码,它看起来像:
<header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div *ngIf="data?.front" fxFlexLayout="column" class="about-data">
<div>Commit: {{data.front.commit}}</div>
<div>Fecha: {{data.front.date}}</div>
<div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div *ngIf="data?.people" fxFlexLayout="column" class="about-data">
<div>Commit: {{data.people.commit}}</div>
<div>Fecha: {{data.people.date}}</div>
<div>Versión: {{data.people.version}}</div>
</div>