Динамически показать / скрыть компонент, если его дата не находится между двумя другими датами - PullRequest
Новая
       4

Динамически показать / скрыть компонент, если его дата не находится между двумя другими датами

0 голосов
/ 14 ноября 2018

У меня есть два входа: <input type="date" id="fromDate"> и <input type="date" id="toDate">, а затем цикл *ngFor, повторяющий список элементов.Все эти элементы имеют свойство activity_date.

. Я хочу иметь возможность показывать только компоненты, имеющие свойство activity_date, между датами fromDate и toDate.Для этого я использую MomentJS, точнее функцию moment(activity_date).isBetween(fromDate, toDate).

. Проблема в том, что я хочу присвоить результат предыдущего метода атрибуту [hidden], поэтому, если input изменяетсясвойство [hidden] будет обновлено.

Но здесь есть одна загвоздка.Как я могу сделать, чтобы показать / скрыть компоненты при изменении inputs?

Вот что я пробовал до сих пор:

view.component.html 

<app-events
  type="calendar-item"
  [hidden]="moment(item.activity_date).isBetween(this.fromDate, this.toDate);"
  [data]="item"
  ></app-events>

view.component.ts 

import { Component, OnInit } from "@angular/core";
import * as moment from "moment";

@Component({
  selector: "app-view",
  templateUrl: "./view.component.html",
  styleUrls: ["./view.component.css"]
})
export class ViewComponent implements OnInit {
  fromDate: string;
  toDate: string;

  item = [
    {
      id: 1,
      activity_date: "14 November 2018",
    }
  ];

  ngOnInit() {}

  isBetweenDate(date: string) {
    return moment(date).isBetween(this.fromDate, this.toDate);
  }
}

Это работает, если я пишу значения в метод вручную, и это работает только при загрузкестр.

Я пытался присмотреть за EventEmitter или пользовательскими атрибутами, но я не уверен, что двигаюсь в правильном направлении.

1 Ответ

0 голосов
/ 14 ноября 2018

Я думаю, что вы сделали почти правильно.Вы сделали isBetweenDate функцию, но не используете ее.

Я создал для вас пример.Он такой же, как ваш, , но не точный .Он сравнивает дату с fromDate и toDate.Так что здесь вы можете изменить даты, и вы получите мгновенный вывод на основе измененных дат.

Вот ссылка:

StackBlitz Ссылка: https://stackblitz.com/edit/angular-48bxrq

...