Скрыть поповер, если значение не определено в Angular 6

Question

Я использую ngx-popover для всплывающей подсказки в Angular 6. Все работает нормально, но если я получаю пустое значение, то также отображается пустой 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 или пустой строке, это ложно, поэтому вы можете использовать наличие значения для определения атрибута [popoverDisabled]. Чтобы быть вдвойне уверенным, вы можете использовать подход bang, bang boolean (!!) вместе с ним, хотя это не должно строго требоваться.

<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;
}