html - ngIf לא עובד. אפילו אם אני עושה *ngIf="true" זה לא מציג, וגם *ngIf="false" לא מציג

אני רוצה להסתיר אלמנט div אם משתנה מסוים הוא null, אבל *ngIf לא עובד גם אם אני מקצה true ישירות.

tree.component.ts

import { Component, OnInit } from '@angular/core';
import { Tree} from '../model/tree';
import { TreeService } from '../service/tree.service';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {

  canShow: boolean = true;
  tree!: Tree;

  constructor(private treeService:TreeService) {
  }

  ngOnInit(): void {
    this.tree= this.treeService.returnTree();
  }

}

tree.component.html

...

          <div *ngIf="canShow">
            <h1 class="sm:text-2xl font-medium mb-2 text-gray-900">Significado dos nomes populares</h1>
            <p class="pb-3 leading-relaxed text-gray-500">{{tree.nameMeaning}}</p>
          </div>
...

tree.component.html

...

          <div *ngIf="true">
            <h1 class="sm:text-2xl font-medium mb-2 text-gray-900">Significado dos nomes populares</h1>
            <p class="pb-3 leading-relaxed text-gray-500">{{tree.nameMeaning}}</p>
          </div>
...

שגיאה בקונסולה:

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'h2'.

פתרון על ידי psyklopz בקישור

ייבאתי את TreeComponent ל-@NgModule declarations של app.module.ts.

תשובה #1

ngIf דורש את CommonModule ב-Angular

התקן את CommonModule במודול האב של הקומפוננטה שלך, שכן הוא מכיל את הדירקטיבה ngIf. לא ראיתי שזה יובא בדוגמה שלך.

import {CommonModule} from '@angular/common';

@NgModule({
    imports: [CommonModule]
})

תשובה #2

בנוסף, אם אתה מנסה להכניס את הדברים האלה לתג <ng-container>, ודא שהתג שלך באמת נקרא ng-container ולא תג אחר שלא קיים כמו ng-component.