HomeComponent.html:16 ERROR TypeError: Cannot read property 'data' of undefined
at Object.eval [as updateDirectives] (HomeComponent.html:16)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12599)
at execComponentViewsAction (core.es5.js:12531)
at checkAndUpdateView (core.es5.js:12257)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)
at callViewAction (core.es5.js:12599)
View_HomeComponent_0 @ HomeComponent.html:16
proxyClass @ compiler.es5.js:14985
DebugContext_.logError @ core.es5.js:13407
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4819
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.es5.js:3844
ApplicationRef_.tick @ core.es5.js:4819
(anonymous) @ core.es5.js:4684
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
NgZone.run @ core.es5.js:3821
next @ core.es5.js:4684
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:128
Subscriber.next @ Subscriber.js:92
Subject.next @ Subject.js:56
EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onHasTask @ core.es5.js:3903
ZoneDelegate.hasTask @ zone.js:441
ZoneDelegate._updateTaskCount @ zone.js:461
Zone._updateTaskCount @ zone.js:285
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
ZoneAwarePromise.then @ zone.js:946
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef_.bootstrapModule @ core.es5.js:4522
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:559
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:574
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
HomeComponent.html:16 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 37, nodeDef: {…}, elDef: {…}, elView: {…}}
这是我的home.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from '../core/app-api.service';
import { Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { Headers } from '@angular/http';
import { LocationStrategy, PlatformLocation, Location } from '@angular/common';
import * as Chartist from 'chartist';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public apps: any[];
public _id: number;
public subscription: Subscription;
private headers = new Headers({ 'Content-Type': 'application/json' });
constructor(public appService: AppService,
private router: Router,
private activatedRoute: ActivatedRoute, ) { }
ngOnInit() {
this.appService.getList().subscribe((response: any) => {
this.apps = response;
}, error => {
console.log(error);
});
this.LoadData();
}
Remove(id: number) {
let confirmResult = confirm("Are you sure to delete this app?");
if (confirmResult) {
this.appService.Delete(id).subscribe(response => {
if (response) {
alert("Deleted");
this.LoadData();
} else (error) => {
console.log(error);
}
})
}
}
LoadData() {
this.appService.getAppById(this._id).subscribe(
(data) => {
this.apps = data;
});
}
public stt: number = 1;
}
有一个home.component.html
<div class="main-content">
<div class="container-fluid">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">id</th>
<th scope="col">Name</th>
<th scope="col">Icon</th>
<th scope="col">Detail</th>
<th scope="col">Created Date</th>
<th scope="col">Updated Date</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let app of apps.data| paginate: { itemsPerPage: 5, currentPage: p}">
<th scope="row">{{app.id}}</th>
<td>{{app.name}}</td>
<td>
<img src="{{apps.url}}/{{app.icon}}"
alt="" width="60" height="60">
</td>
<td>
<a [routerLink]="['app-detail',app.id]" class="btn btn-primary">Read more...</a>
</td>
<td>{{app.created_at | date}}</td>
<td>{{app.updated_at | date}}</td>
<td class="td-actions ">
<a [routerLink]="['edit-app',app.id]" rel="tooltip" title="Edit App" style="margin-right:20px;" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-2x fa-edit"></i>
</a>
<a (click)="Remove(app.id)" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-2x fa-times"></i>
</a>
</td>
</tr>
</tbody>
<div id="paginate">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</table>
</div>
</div>
这是我的app.service.ts https://ibb.co/kfqJfc （我是角度2,4的新手，也没有上传图像的经验，所以我随机选择这个给你们看，然后也许你可能认为它是一种bug或病毒，但实际上不是这样，我如果有人可以推荐我另一个人们通常使用的域名，我也很感激。
任何有想法的人都会对我很好，我会为你提供你想要的任何文件
答案 0 :(得分：0)
这是因为您在ngOnInit中未初始化模板时使用模板中的应用。 在模板中添加* ngIf，以便在初始化应用时创建html
<tr *ngIf="apps" *ngFor="let app of apps.data| paginate: { itemsPerPage: 5, currentPage: p}">
答案 1 :(得分：0)
您正在尝试访问实际未正确定义的apps变量的data属性。使用＆＃34;调试器;＆＃34;在你设置了apps变量值的行之后的typeScript代码中的语句，它允许你将代码调试到chrome devTool中，而不是你可以检查天气它是否正常值。
this.appService.getList().subscribe((response: any) => {
this.apps = response;
debugger;
}, error => {
console.log(error);
});
LoadData() {
this.appService.getAppById(this._id).subscribe(
(data) => {
this.apps = data;
debugger;
});
}
答案 2 :(得分：0)
这与您使用表格时的问题类似。 简单修复：将 *ngIf 添加到父级。 示例：
<table *ngIf = "items">
<tr *ngFor = "let item of items">
<td>item.something</td>
</tr>
</table>
防止 Angular 在定义数组之前查找数组