无法在 Object.eval [as updateDirectives] 中读取 null

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 === '[e-mail]' && 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>

Answer 1

groupedComments$ | async是null在收到 http 响应之前，这就是原因。