Angular - NgIf 無法在組件上工作：“NG0303：無法綁定到‘ngIf’，因為它不是‘p’的已知屬性。”

Question

我正在嘗試在組件上使用 ngif 指令，但控制台上不斷出現以下錯誤：“NG0303：無法綁定到‘ngIf’，因為它不是‘p’的已知屬性。”，以及該元素只是沒有出現。 此外，我正在為某些元素使用 po-ui 框架。

這是組件的 ts 和 html 代碼：

cadastro-usuario.component.ts：

import { Component, OnInit } from '@angular/core';
import { PoButtonGroupModule } from '@po-ui/ng-components';
import { PoButtonGroupItem } from '@po-ui/ng-components';

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

  constructor() { }

  ngOnInit(): void {
  }
  
  buttons: Array<PoButtonGroupItem> = [
    { label: 'Vínculo', action: this.vinculo.bind(this) },
    { label: 'Endereço', action: this.endereco.bind(this) },
    { label: 'Contatos', action: this.contatos.bind(this) },
  ];

  vinculo() {
  alert("vinculo");
  }
  
  endereco() {
  alert("endereco");
  }
  
  contatos() {
  alert("contatos");
  }
}

cadastro-usuario.component.html：

<p style="display:inline-block; margin-left:80px; margin-top:20px; width: 600px;">
    <po-button-group class="po-md-12" [p-buttons]="buttons"> </po-button-group>
</p>

<br>

<p *ngIf="true" style="display:inline-block; margin-left:80px; margin-top:20px; width: 300px;">
    <po-input name="vinculo" p-label="Vínculo"> </po-input>
</p>

Answer 1

我想這可能是重復的，但是您應該導入

CommonModule 和 BrowserModule

在組件的模塊下，如果您不確定，只需將其添加app.module.ts文件，如下所示：

1 進口：

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

2 在 NgModule 下：

@NgModule({
  imports: [
    CommonModule,
    BrowserModule
...

Answer 2

如果您在這里並且導入 CommonModule 和瀏覽器模塊解決方案不起作用。 仔細檢查 *ngIf 語句是否有正確的駝峰式大小寫。 例如，將外殼設為 *ngif 將拋出引用的錯誤。