![](/img/trans.png)
[英]ERROR TypeError: Cannot read property 'length' of undefined at Object.updateDirectives
[英]ERROR TypeError: Cannot read property '1' of null at Object.eval [as updateDirectives]
我面临一个我不清楚的错误。 我能够看到要编辑的数据,但每次都会出现这样的错误。 我试图捕捉错误,但我没有得到它的来源:每个 console.log 都作为例外工作。 我认为问题在于第一次加载时的数据是 null。 这只有在我尝试显示第二个ngFor
出现,因为如果我只让第一个比它工作一切正常但没有显示,那么arrays of comments the second *ngFor
。
RROR TypeError: Cannot read property '1' of null at Object.eval [as updateDirectives] (PostsListComponent.html:20) at Object.debugUpdateDirectives [as updateDirectives]
我正在获取类似这样的数据。
<tr *ngFor="let post of posts$ | async; trackBy:trackByFunction">
<td class="title">{{post.title}}</td>
<td class="dateTime">{{post.body}}</td>
<div *ngFor="let comment of (groupedComments$ | async)[post.id]; trackBy:trackByFunction">
<div>
<td *ngIf="!isEditable(comment)" class="comment">{{comment.name}}</td>
<textarea class="comment" *ngIf="isEditable(comment)" [(ngModel)]="editableComment.name"></textarea>
<td *ngIf="!isEditable(comment)"class="comment">{{comment?.body}}</td>
<textarea class="comment" *ngIf="isEditable(comment)" [(ngModel)]="editableComment.body"></textarea>
<td class="comment" *ngIf="comment.email === 'Just@do.it' && comment.body.length < 200">
{{comment.email}}
<button *ngIf="!isEditable(comment)" (click)="deleteComment(comment.id)" class="btn btn-danger">Delete</button>
<button *ngIf="!isEditable(comment)" (click)="editComment(comment)" class="btn btn-info" style="margin-left: 10px">Edit</button>
<button *ngIf="isEditable(comment)" (click)="update(comment)" class="btn btn-info" style="margin-left: 10px">Update</button>
<button *ngIf="isEditable(comment)" (click)="cancel()" class="btn btn-danger" style="margin-left: 10px">Cancel</button>
</td>
</div>
</div>
</tr>
TS
文件。
posts$: Observable<Post[]>;
comments$: Observable<Comment[]>;
groupedComments$: Observable<CommentGroup>;
editableComment = emptyComment();
constructor(private postsService: PostService,
private commentsService: CommentService,
private confirmationDialogService: ConfirmationDialogService) {
this.getAllData();
}
ngOnInit() {
}
getAllData() {
this.posts$ = this.postsService.getPostsList();
this.comments$ = this.commentsService.getCommentsList();
this.groupedComments$ = this.comments$.pipe(
map(comments => lodash.groupBy(comments, 'postId')),
);
}
这是我的服务。
export class PostService {
private baseUrl = 'http://localhost:3000/posts';
constructor(private http: HttpClient) { }
getPostsList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}
}
export class CommentService {
private baseUrl = 'http://localhost:3000/comments';
constructor(private http: HttpClient) { }
getComment(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/${id}`);
}
getCommentsList(): Observable<any> {
return this.http.get(`${this.baseUrl}`).pipe(catchError(this.errorHandler));
}
}
groupedComments$ | async
在收到 http 响应之前, groupedComments$ | async
是null
,这就是原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.