如果某个变量是
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'.
我已将
TreeComponent
导入到 @NgModule
的 declarations
app.module.ts
。
ngIf
需要 Angular 中的 CommonModule将
CommonModule
安装到组件的父模块中,因为它具有 ngIf
指令。我没有看到您的示例中导入了该内容。
import {CommonModule} from '@angular/common';
@NgModule({
imports: [CommonModule]
})
此外,如果您尝试将这些内容放入
<ng-container>
标签中,请确保您的标签实际上名为 ng-container
,而不是像 ng-component
这样不存在的其他标签。