post.capabilities.items仍然会被定义，因为它是一个空数组，如果你检查post.capabilities.items.length，它应该工作正常，因为0是假的。

验证数组的length属性是否大于0：

<p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

字符串
JavaScript中的数组（对象）是truthy值，因此初始验证<p ng-if="post.capabilities.items">的计算结果始终为true，即使数组为空。

要解决null/undefined问题，请尝试使用?运算符检查是否存在：

<p ng-if="post?.capabilities?.items?.length > 0">

字符串

• 注意，如果有人到这个页面寻找一个 * 离子框架 * 答案，请确保您使用*ngIf：

<p *ngIf="post?.capabilities?.items?.length > 0">

型

• 这是解决方案：*

<div *ngIf="post.capabilities.items.length > 0 && post.capabilities.items[0] !== '' "> ..... </div>

字符串
检查post.capabilities.items的长度是否大于零，并确保数组中的第一个项目不是空字符串。这确保了只有当有可用的post.capabilities.items并且列表中的第一个项目不是空字符串时才显示内容。

根据我的经验，在HTML模板上做这件事被证明是困难的，所以我决定使用一个事件来调用TS上的一个函数，然后检查条件。

emptyClause(array:any) {

        if (array.length === 0) {
            // array empty or does not exist

            this.emptyMessage=false;

    }else{

            this.emptyMessage=true;
        }
}

字符串
HTML

<div class="row">

        <form>
            <div class="col-md-1 col-sm-1 col-xs-1"></div>
            <div class="col-md-10 col-sm-10 col-xs-10">
        <div [hidden]="emptyMessage" class="alert alert-danger">

            No Clauses Have Been Identified For the Search Criteria

        </div>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1"></div>
        </form>

型