angular - 在角度中使用指令 ngIf 或指令 ngFor 时显示空白页
问题描述
我刚开始使用 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 和
角 CLI:8.1.1
节点:10.15.2
操作系统:win32 x64
角度:8.1.0
请指导我哪里错了:(
解决方案
问题是,在其中放置<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
文件中设置主机组件的样式。
推荐阅读
- apache-spark - 如何让 PySpark 在 Google Cloud Composer 上运行
- java - Gradle 在自定义运行任务中创建参数
- zimbra - 如何在 CentOS8 上制作 Smart Agenda Zimbra
- arrays - 如何在不删除旧状态的情况下设置对象的状态数组
- php - 如何使用空条目从 SQL 中的 2 个表中获取数据
- javascript - 在打字稿中将数据从子类传递给父类
- c++ - std::pair 替换因 std::size_t 失败
- python - pandas:根据另一列中的值获取与相应索引的确切对应值
- jquery - HTML 数据属性不变
- chromium-embedded - DirectX 9 和 cef