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 CLI：8.1.1

节点：10.15.2

操作系统：win32 x64

角度：8.1.0

请指导我哪里错了：（

Answer 1

事实是，将<h3>或<input>标签放在<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>标签。您可以通过:host文件中的.css对主机组件进行样式设置。

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

1 个答案: