如果 Angular 中的值未定义，则隐藏弹出框 6

Question

我在 Angular 6 中使用 ngx-popover 作为工具提示。一切正常，但如果我得到空值，那么它也会显示空 popver

我的代码是：

<div class="vertical sub-child active{{item._id}}" [ngClass]="{'shortlen': item.category.length>36 }" 
                        popover="{{item.description}}"
                            popoverPlacement="right"
                            [popoverOnHover]="true"
                            [popoverCloseOnClickOutside]="true"
                            [popoverCloseOnMouseOutside]="true"
                            [popoverDisabled]="false"
                            [popoverAnimation]="true"> {{item.category}} </div>

{{item.description}} 有时是空的，那时我的工具提示必须消失

Answer 1

当item.description为undefined或空串时，为falsy，所以可以用值的存在来判断[popoverDisabled]属性。可以肯定的是，您可以同时使用 bang, bang 布尔值方法 (!!)，尽管严格来说它不是必需的。

<div class="vertical sub-child active{{item._id}}" [ngClass]="{'shortlen': item.category.length>36 }" 
                    popover="{{item.description}}"
                        popoverPlacement="right"
                        [popoverOnHover]="true"
                        [popoverCloseOnClickOutside]="true"
                        [popoverCloseOnMouseOutside]="true"
                        [popoverDisabled]="!!item.description"
                        [popoverAnimation]="true"> {{item.category}} </div>

或者，如果 item 中的其他键可能为空，并且需要隐藏弹出窗口，请改用组件中的函数；

<div class="vertical sub-child active{{item._id}}" [ngClass]="{'shortlen': item.category.length>36 }" 
        popover="{{item.description}}"
        popoverPlacement="right"
        [popoverOnHover]="true"
        [popoverCloseOnClickOutside]="true"
        [popoverCloseOnMouseOutside]="true"
        [popoverDisabled]="hasRequiredValues(item)"
        [popoverAnimation]="true"> {{item.category}} </div>

在你的组件中；

/**
 * Do all your data tests here, and return the result
 */
hasRequiredValues(item: Item) {
   return !!item.description && !!item.category;
}

如果 Angular 中的值未定义，则隐藏弹出框 6

Hide popover if value is undefined in Angular 6

angular6

popover