错误类型错误：无法在 Object.eval [as updateDirectives] 处读取 null 的属性“1”答案

【问题标题】：ERROR TypeError: Cannot read property '1' of null at Object.eval [as updateDirectives]错误类型错误：无法在 Object.eval [as updateDirectives] 处读取 null 的属性“1”
【发布时间】：2019-11-11 09:03:30
【问题描述】：

我面临一个我不清楚的错误。我能够看到要编辑的数据，但每次都会出现这样的错误。我试图捕捉错误，但我没有得到它来自哪里：每个 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));
}
}

【问题讨论】：

尝试使用 ngContainer 将代码包装在中：...
@JacopoSciampi 哪个 td ？
对不起，我的意思是 tr。 TD列表
@JacopoSciampi 为什么你这样写 *ngIf="!!posts" 我的 posts 它被声明为 posts$ ？我已经改变了，但你同样的错误。