Добавить условие по значениям [attr.data-show] в шаблон

Question

Я пытаюсь реализовать условие в шаблоне, используя значение атрибута attr.data-show. но это не работает. как правильно с этим справиться?

вот мой код:

<p [attr.data-show]="false" *ngIf="{{this.attr.data-show}}">
  Start editing to see some magic happen :)
</p>

кто-нибудь мне поможет?

Live Demo

Заранее спасибо.

Answer 1

Я все еще не совсем понимаю, что вы ищете. Но для управления видимостью элемента в шаблоне вы можете использовать <ng-template> для создания встроенных представлений и использования их свойств контекста. Попробуйте следующее:

<ng-template #textShow let-show>
  <ng-container *ngIf="show">
    <p>Start editing to see some magic happen :)</p>
  </ng-container>
</ng-template>

<ng-template 
  [ngTemplateOutlet]="textShow" 
  [ngTemplateOutletContext]="{ $implicit: true }"
></ng-template>

Теперь вы можете управлять видимостью с помощью свойств $implicit: true (показывать содержимое) и $implicit: false (не показывать содержимое).

Рабочий пример: Stackblitz

Answer 2

Вам необходимо получить доступ к разделенным - свойствам, например: attrOb['data-show']

<p [attr.data-show]="false" *ngIf="attrOb['data-show']">
  Start editing to see some magic happen :)
</p>

Это также означает, что у вас есть attrOb в .ts

attrOb: any = {
  'data-show': true
}

Здесь вы можете найти свой измененный код: Ссылка