Question

我面临的错误对我来说尚不清楚。我能够看到要编辑的数据，但每次都会出现这样的错误。我试图捕获错误，但是我不知道它的来源：每个console.log均按例外方式工作。我认为问题是第一次加载为空时数据在某处。而且只有在我尝试显示第二个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));
}
}

这是我的服务。

.htaccess

Answer 1

groupedComments$ | async是null，这是收到HTTP响应之前的原因。

错误TypeError：无法在Object.eval [作为updateDirectives]

1 个答案: