показывать пустую страницу при использовании директивы ngIf или директивы ngFor в угловых - PullRequest
Новая
       34

показывать пустую страницу при использовании директивы ngIf или директивы ngFor в угловых

2 голосов
/ 11 июля 2019

Я только начал 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

Пожалуйста, покажите мне, где неправильная вещь: (

1 Ответ

2 голосов
/ 11 июля 2019

Дело в том, что вы получаете ошибки проверки при размещении тегов <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.

...