Angular 10错误：访问上一个数组元素时，对象可能是“未定义”的

问题描述

Angular 10，TypeScript：3.9.7。

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

我的component.ts：

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

我的component.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。它不会让我访问数组book [i-1]中的上一个元素。我不想初始化和弥补books数组中至少两个元素的价值。需要从服务器获取数据。谢谢。

解决方法

通过为输入分配默认值，可以消除“可能未定义”错误：

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