Дата не привязана должным образом к Angular свойству ввода - PullRequest
Новая
       5

Дата не привязана должным образом к Angular свойству ввода

0 голосов
/ 29 февраля 2020

Я создал календарь в своем приложении Angular и пытаюсь передать указанную c дату, когда пользователь нажимает на дочерний компонент. Дочерний компонент объявлен, как показано ниже: 

<app-day-view [date]="dateToPass | date:'yyyy-MM-dd'"></app-day-view>

И дочерний компонент настроен так, чтобы правильно также принимать свойство ввода: 

import { Component, OnInit, Input, Output } from '@angular/core';
import { DateHandlerService } from './../../_services/date-handler.service';

declare var $: any;

@Component({
  selector: 'app-day-view',
  templateUrl: './day-view.component.html',
  styleUrls: ['./day-view.component.css']
})
export class DayViewComponent implements OnInit {

  @Input() date;
  dateString: string;
  constructor(public dateHandler: DateHandlerService) { }

  ngOnInit() {
    $('#dayModal').on('shown.bs.modal', this.getDateString);
  }

  getDateString() {
    //this.dateString = this.dateHandler.convertToOutDate(this.date);
  }
}

Предполагается, что я нажимаю один дней в моем календаре и <app-day-view>, который является модальным, открывается, берет dateToPass, который, как я подтвердил, уже сохраняет правильную дату, и отправляет ее в дочерний компонент. Этот шаблон не выдает никаких ошибок, но к тому времени, когда я проверяю дату внутри DayViewComponent, она не определена.

Я предполагал, что это проблема, вызванная дочерним компонентом, существующим в родительском компоненте, прежде чем открыт. Свойство ввода даты технически будет неопределенным, пока я не нажму на день в календаре, после чего оно внезапно станет определенным, но я не уверен, что свойства ввода Angular работают так. Чтобы обойти это, я использовал JQuery для проверки модального события shown.bs.modal, и я пытаюсь использовать дату только после того, как это событие сработало, но дата все еще кажется неопределенной.

Ответы [ 2 ]

2 голосов
/ 29 февраля 2020

Если ваш дочерний компонент календаря существует в DOM до того, как вы на самом деле получите значение в dateToPass, то undefined будет go для вашего ввода.

Я признаю, что не играл с много, но разве это не попытается превратить ваш ввод даты в строковый ввод? Если у вас есть Date в качестве входных данных, просто предоставьте ему объект Date как есть, а не пытайтесь отформатировать его (если компонент на самом деле не нуждается в строковом вводе).

Помимо этого, в когда вы пытаетесь увидеть значение в вашем ngOnInit методе, вы не передаете ему никакого значения, если только вы не заключаете этот компонент в *ngIf.

Любое последующее изменение в значение из dateToPass не вызовет повторного нажатия на метод ngOnInit - это буквально только один раз при инициализации компонента, которая уже была достигнута.

Вы можете перехватить любой в Angular обнаружение изменений, или переключите ваш вход на установщик ... 

@Input() public set date(value: Date) {
  this.onDateChanged(value);
}

private onDateChanged(date: Date): void {
  console.log(`Date value changed to: ${date}`);
}

Если вы хотите убедиться, что ваш компонент имеет входное значение, то скрыть его (фактически удалить из dom, а не просто «скрытый») с *ngIf: 

<div *ngIf="dateToPass">
  <app-day-view [date]="dateToPass"></app-day-view>
</div>

Это позволит Angular только визуализировать (и инициализировать) ваш компонент, как только вы активно установите значение - таким образом гарантировано иметь доступное значение на ngOnInit f или вам проверить.

2 голосов
/ 29 февраля 2020

Я думаю, что проблема в том, что значение ngOnit не определено в начале, потому что ответ занимает много времени.

Используйте ngOnChanges () вместо ngOnit

Просто console.log в ngOnChanges () если значение приходит, добавьте условие if 

    ngOnChanges(){
    console.log(date);
     $('#dayModal').on('shown.bs.modal', this.getDateString);
    }

 getDateString() {
    if(date){
        //this.dateString = this.dateHandler.convertToOutDate(this.date);
      }
    }
...