HTML 错误：“类型上不存在属性”即使未显示

Question

我有一个使用 AngularJS 的 HTML 文件，如下所示：

<div *ngIf="Item">
    <!-- Create a 'display' for each category. -->
    <div *ngIf='Item.category === "book"'>
        <p>Book Title: {{Item.booktitle}}</p>  
    </div>
    <div *ngIf='Item.category === "sport"'>
        <p>Sport: {{Item.sport}}</p>
    </div>
</div>

该文件应该检查项目是什么类别，并仅显示与该类别相关的属性。 这些类别用于不同的“项目”对象，并且这些项目不共享这些属性。 我试图做到这一点，因此如果项目是该类别，应用程序只读取存在于特定类别的属性，但无论事先使用 ngIf 语句如何，程序似乎仍会读取它们并抛出“类型上不存在属性”即使从未显示这些属性也会出错。

我对解决这个问题的最佳猜测是在调用特定属性以处理它们丢失时实现一个“if”语句，如下所示：

 <p>Book Title: {{ if Item.category ==="book" -> Item.booktitle, else -> "N/A" }}</p>

我不知道如何使用 HTML 或 AngularJS 来做到这一点，或者这是否是一个可行的解决方案。 我将如何解决这个问题？

Answer 1

看起来Item上的category属性并不总是存在。

为了解决这个问题，您有几个选择：

1. 使用条件链接来处理边缘情况，如果属性丢失，则条件失败为 false（您需要预处理 JS 才能使其工作）
2. 在该代码之前放入某种 null 检查以确保属性始终存在并将其设置为空字符串或false或其他东西