Angular 10 错误：访问前一个数组元素时对象可能“未定义”答案

【问题标题】：Angular 10 error: Object is possibly 'undefined' when accessing the previous array elementAngular 10 错误：访问前一个数组元素时对象可能“未定义”
【发布时间】：2021-01-02 07:00:20
【问题描述】：

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 数组中的至少两个元素初始化和弥补值。数据需要从服务器获取。谢谢。

【问题讨论】：

您是否尝试从@Input() books?: Array<Book>; 中删除?？该错误表明该数组可能未定义，? 符号会建议编译器。
如果我删除“？”从@Input() books?: Array<Book>;，我得到“属性'books'没有初始化程序，并且没有在constructor.ts(2564)中明确分配”错误消息。
所以我想这里的一些答案可能会有所帮助：stackoverflow.com/q/49699067/7337369

标签： angular typescript angular10

【解决方案1】：

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

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

【讨论】：