在 angular 中使用指令 ngIf 或指令 ngFor 时显示空白页

Question

我刚开始 Angular 和初学者。

当我在我的组件中使用 *ngIf 或 *ngFor 时，程序输出是一个空白页面但没有 *ngIf 和 *ngFor 页面工作正常。

代码 Product.Component.html

<p>Q: what is your Name?<input [disabled]="isButtonDisable" type="text" #txtAnswer>
    <button [disabled]="product.price>1000" (click)="onclickHandler(txtAnswer.value)">Answer</button>
    <h3 *ngIf="isButtonDisable">{{deadline}}</h3>
</p>

和代码product.component.ts

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  public isButtonDisable = false;
  public product = {
    name: 'car',
    price: 1000
  };
  public deadline = 20;
  constructor() {
    setInterval(() => this.deadline--, 1000);
    setInterval(() => this.isButtonDisable = true, 20000);
  }
  onclickHandler(Value: number) {
    this.deadline = 20;
  }
}

我的 IDE 是 vscode 和

Angular命令行界面：8.1.1

节点：10.15.2

OS: win32 x64

Angular: 8.1.0

请指导我错误的地方:(

Answer 1

事实是，在 <p> 内放置 <h3> 或 <input> 标签时会出现验证错误，至少控制台是这么说的...

尝试：

Q: what is your Name?
<input [disabled]="isButtonDisable" type="text" #txtAnswer />
<button [disabled]="product.price>1000" (click)="onclickHandler(txtAnswer.value)">
  Answer
</button>
<h3 *ngIf="isButtonDisable">{{deadline}}</h3>

应该渲染得很好。无论如何，您不需要 <p> 标签。您可以通过 .css 文件中的 :host 设置主机组件的样式。

在 angular 中使用指令 ngIf 或指令 ngFor 时显示空白页

show blank page when use Directive ngIf or Directive ngFor in angular

angular

visual-studio-code

angular-directive

ngfor

angular-ng-if