[英]show blank page when use Directive ngIf or Directive ngFor in angular
I just started Angular and beginner in it.我刚刚开始使用 Angular 并且是它的初学者。
When I use the *ngIf or *ngFor in my Component, the program output is a blank page but without *ngIf and *ngFor The page works correctly.当我在我的组件中使用 *ngIf 或 *ngFor 时,程序输出是一个空白页,但没有 *ngIf 和 *ngFor 页面正常工作。
code of Product.Component.html 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>
and code of product.component.ts和 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;
}
}
my IDE is vscode and我的 IDE 是 vscode 和
Angular CLI: 8.1.1角 CLI:8.1.1
Node: 10.15.2节点:10.15.2
OS: win32 x64操作系统:win32 x64
Angular: 8.1.0角度:8.1.0
Please guide me where the wrong thing is :(请指导我错误的地方:(
Thing is, you get validation errors when placing <h3>
or <input>
tags inside a <p>
at least that's what the console says...问题是,在
<p>
中放置<h3>
或<input>
标签时会出现验证错误,至少控制台是这么说的......
Try:尝试:
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>
Should render just fine.应该渲染得很好。 You don't need the
<p>
tag anyway.无论如何你都不需要
<p>
标签。 You could style your host component via :host
in the .css
file.您可以通过
.css
文件中的:host
您的主机组件的样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.