ng如果不工作。即使我这样做 *ngIf="true" 它也不会显示, *ngIf="false" 也不会显示

问题描述 投票:0回答:2

如果某个变量是

null
,我想隐藏一个div,但是即使我直接分配true,
*ngIf
也不起作用。

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'.

解决方案由psyklopzlink

我已将

TreeComponent
导入到
@NgModule
declarations
app.module.ts

html angular typescript angular-directive angular-ng-if
2个回答
0
投票

ngIf
需要 Angular 中的 CommonModule

CommonModule
安装到组件的父模块中,因为它具有
ngIf
指令。我没有看到您的示例中导入了该内容。

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

@NgModule({
    imports: [CommonModule]
})

0
投票

此外,如果您尝试将这些内容放入

<ng-container>
标签中,请确保您的标签实际上名为
ng-container
,而不是像
ng-component
这样不存在的其他标签。

© www.soinside.com 2019 - 2024. All rights reserved.