Angular 10 错误 : Object is possibly 'undefined' when accessing the previous array element

Question

Angular 10， typescript :3.9.7。

我正在尝试按图书的 CRN 编号对图书列表进行分组。 “books”数组从父组件通过 @Input 传递到 TextbooksComponent。

我的组件.ts:

...
export class TextbooksComponent {
    @Input() books?: Array<Book>;
}
...

我的组件.html:

...
<div *ngFor="let book of books; let i=index" class="books">
    <div *ngIf="i>0 && book?.CRN === books[i-1]?.CRN; else bookCRN">
        <hr>
    </div>
    <ng-template #bookCRN>
        <h3>crn: {{ book?.CRN }}</h3>               
    </ng-template>
    <app-book
        [textbook]="book">
    </app-book>
</div>
...

编译时出现以下错误，即使在我使用“?”之后也是如此使我的变量可选并检查 i>0.

 ERROR in ...textbooks.component.html:16:42 - error TS2532: Object is possibly 'undefined'.

    16         <div *ngIf="i>0 && book?.CRN === books[i-1]?.CRN; else bookCRN">
                                                ~~~~~~~~~~

我该如何解决这个问题？我也尝试添加 books?.length>1。它不会让我访问数组 books[i-1] 中的前一个元素。我不想为 books 数组中的至少两个元素初始化和弥补值(value)。需要从服务器获取数据。谢谢。

Answer 1

您可以通过为输入分配默认值来摆脱“可能未定义”的错误:

    @Input() books: Array<Book> = [];