Как исправить «Невозможно установить свойство undefined»? - PullRequest
Новая
       17

Как исправить «Невозможно установить свойство undefined»?

1 голос
/ 07 апреля 2020

Я делаю таймер обратного отсчета в angular, но получаю TypeError при попытке вызвать переменную из другого компонента. Я не могу понять, что именно вызывает эту проблему. Это видео, за которым я следую: Таймер обратного отсчета Ниже мой код:

Timer.component.ts 

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-timer',
  template: `<span>{{ currentValue }}</span>`,
  styleUrls: ['./timer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimerComponent implements OnInit {

  @Input() startAt = 0;

  @Output() counter = new EventEmitter<string>();

  currentValue = '';
  constructor(private changeDetector: ChangeDetectorRef) { }

  ngOnInit(){
  }

  public start(){
    this.currentValue = this.formatValue(this.startAt);
    this.changeDetector .detectChanges();
  }

  private formatValue(v){
    const minutes = Math.floor(v/60);
    const formattedMinutes = (minutes > 9) ? minutes : ('0' + minutes);

    const seconds = v%60;
    const formattedSeconds = (seconds > 9) ? seconds : ('0' + seconds);

    return `${ formattedMinutes } : ${ formattedSeconds }`;
  }
}

questions.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core';
import { TimerComponent } from '../timer/timer.component';

export class QuestionComponent implements OnInit {

  @ViewChild('counter', { read: TimerComponent })
  private counter: TimerComponent;

  ngOnInit() {
      this.counter.startAt = 2700;
      this.counter.start();
  }
}

question.component. html

<app-timer #counter></app-timer>

ОШИБКА 

core.js:6185 ERROR TypeError: Cannot set property 'startAt' of undefined
    at QuestionComponent.ngOnInit (question.component.ts:122)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)

Это мой код. Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 08 мая 2020

Вам нужно дождаться инициализации ребенка с помощью крюка AfterViewInit. 

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

export class QuestionComponent implements OnInit, AfterViewInit {

    ngAfterViewInit() {
        this.counter.startAt = 2700;
        this.counter.start();
    }

}
...