Невозможно установить свойство undefined (если оно определено) в Angular

Question

Я создаю приложение / компонент таймера и не могу найти свою ошибку.Это звучит так: Невозможно установить свойство startAt из неопределенного.Не знаю, где ошибка, потому что я определил ее в своем компоненте панели мониторинга.Есть идеи, где ошибка и как ее исправить?Я публикую большую часть своего кода, возможно, ошибка где-то еще.

Это мой код:

Мой файл dashboard.ts

export class DashboardComponent implements OnInit {
  appUser: User;
  clients: Client[] = [];
  today: Date = new Date(2019, 9, 25, 12, 23);     // Defualt todays time;

  @ViewChild('counter', {read: CounterComponent, static: false})
  private counter: CounterComponent;

  counterState = 'counter is ticking';
  ngOnInit() {
    this.appUser = this.userS.currentUser;
    this.clients = this.clientService.getUserClients()
    .sort((a, b) => {
      return (new Date(a.registrationDate) as any) - (new Date(b.registrationDate) as any);
    });
    this.counter.startAt = 120;   // Here I am defining it
    this.counter.counterState.subscribe((msg)=>{
      if(msg==='COMPLETE') {
        this.counterState = 'counter has stopped';
      }
    });
    this.counter.start();
  }
}

Мой файл dashboard.html

<counter #counter></counter>

My Mycounter.ts file

@Component({
  selector: 'counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent  {
  @Input()
  startAt:number = 1;

  @Input()
  showTimeRemaining = true;

  @Output()
  counterState = new EventEmitter();

  currentValue = '';

  private currentSubscription: Subscription;

  constructor(private changeDetector: ChangeDetectorRef) { }

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

    const t: Observable<number> = interval(1000);
    this.currentSubscription = t.pipe(take(this.startAt))
.pipe(  // not sure about this place but using only map but else it says 
        // Property 'map' does not exist on type 'Observable<number>'
  map(v =>    this.startAt - (v + 1))).subscribe(v => {
        this.currentValue = this.formatValue(v);
        this.changeDetector.detectChanges();
      }, err => {
        this.counterState.error(err);
      }, () => {
        this.currentSubscription.unsubscribe();
        this.currentValue = '00:00';
        this.counterState.emit('COMPLETE');
        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}`;
  }
}

Answer 1

Вы можете решить эту проблему двумя способами: во-первых, вы можете использовать static: true, чтобы сделать counter доступным в ngOnInit:

@ViewChild('counter', {read: CounterComponent, static: true})
private counter: CounterComponent;

Таким образом, вы сможете получить доступ к counterпеременная в ngOnInit, если нет структурной директивы, препятствующей этому (например, *ngIf, подробнее об этом здесь и здесь ).

Второй способэто переместить counter код в ngAfterViewInit (там переменная counter будет разрешена, и вы не получите ошибку):

@ViewChild('counter', {read: CounterComponent, static: false})
private counter: CounterComponent;

ngAfterViewInit() {
    this.counter.startAt = 120;
    this.counter.counterState.subscribe((msg)=>{
      if(msg==='COMPLETE') {
        this.counterState = 'counter has stopped';
      }
    });
    this.counter.start();
}

Надеюсь, это поможет ...