Как показать \ закрыть элемент в Angular 6 по клику? - PullRequest
Новая
       31

Как показать \ закрыть элемент в Angular 6 по клику?

0 голосов
/ 29 января 2019

Помогите, пожалуйста, с этим .. Angular 6. Я пытаюсь изменить свой CSS с помощью [ngClass], но он работает только один раз.

Проблема: есть календарь .... КогдаЯ нажимаю на любой тд, я показываю форму рядом с тд.Но я также хочу закрыть форму, когда нажимаю кнопку «закрыть» на форме.

Текущее поведение: я нажимаю на td, форма появляется.Затем я нажимаю «закрыть», чтобы скрыть форму.Затем, когда я снова нажимаю на td, у меня появляется ошибка: «ОШИБКА TypeError: this.showEventForm не является функцией в» ... - это мой родительский компонент пытается вызвать функцию child (form) для отображения формы ..

Родительский компонент (календарь): 

showEventForm: any;
@ViewChild(BigEventFormComponent)
  private formComponent: BigEventFormComponent;

  ngAfterViewInit() {
    this.showEventForm = this.formComponent.showForm;
  }

  ngOnInit() {
    this.currentMonthNumber = 1;
    this.createCalendar(2019, 1);
  }

  showBigEventForm(event) {
    let target = event.target;
    const table = document.querySelector('table');

    while (target !== table) {
      if (target.tagName === 'TD') {
        this.showEventForm(); // those error func
        positionBigForm(target);
        return;
      }
      target = target.parentNode;
    }
  }

дочерний компонент (форма) 

export class BigEventFormComponent  {
  showEventForm: Boolean;

  showForm() {
    this.showEventForm = true;
  }

  closeForm() {
    this.showEventForm = false;
  }

}

шаблон для формы 

<form class="event-form" data-x-coords="-10"
  [ngClass]="{ showform: showEventForm}">
  <a href="#" 
    class="close close-big-form"
    (click)="closeForm()">
  </a>

  <input type="text" name="event-field" placeholder="Событие">
  <input type="text" name="date-field" placeholder="День, месяц, год">
  <input type="text" name="members-field" placeholder="Имена участников">
  <textarea name="descript-field" placeholder="Описание"></textarea>
  <button class="submit-event" type="submit">Готово</button>
  <button class="reject-event">Удалить</button>
</form>

Имеюпопробовал * ngIF, такая же история произошла.Заранее благодарим за решение этой «проблемы».

...