Angular 4+: почему ng-if не работает в app.componet.html?

Question

В настоящее время я пытаюсь использовать директиву ng-if в моем файле app.component.html:

<p>This should appear.</p>

<p ng-if="0==1">This shouldn't, but it does.</p>

Мой файл app.component.ts выглядит так:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

Я пробовал множество различных значений вместо 0==1 и это все еще не работает, включая использование значения переданной переменной. Компилируется и отображается без ошибок, но не удаляет второй p,

Я также пытался *ng-if, Когда я это делаю, я получаю сообщение об ошибке:

Template parse errors:

Can't bind to 'ng-if' since it isn't a known property of 'p'. ("<p>This should appear.</p>

<p [ERROR ->]*ng-if="0==1">This shouldn't, but it does.</p>

"): ng:///AppModule/AppComponent.html@2:3
Property binding ng-if not used by any directive on an embedded template. 
Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("<p>This should appear.</p>

Answer 1

В Angular структурные директивы начинаются со звездочки (*), а директива пишется без тире. Проверьте официальную документацию для деталей:

Чтобы исправить ваш код, напишите *ngIf вместо ng-if,

https://angular.io/guide/structural-directives

Быстрый взгляд, почему из официальных документов:

Звездочка - это "синтаксический сахар" для чего-то более сложного. Внутренне Angular преобразует атрибут * ngIf в элемент, обернутый вокруг элемента host.

Answer 2

В Appcomponent:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
isShowing = true;
}

В вашей разметке:

<p *ngIf="isShowing">This shouldn't, but it does.</p>