如果组件的日期不在其他2个日期之间，则动态显示/隐藏组件

Question

我有两个输入：<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或自定义属性，但我不确定我是否朝着正确的方向前进。

Answer 1

我觉得你做得差不多了。你做了isBetweenDate功能，但不使用它。

我为你创造了一个例子。它和你的一样，但不完全一样。它将日期与fromDate和toDate进行比较。所以在这里，您可以更改日期，您将根据更改的日期获得即时输出。

链接在这里：

StackBlitz链接：https://stackblitz.com/edit/angular-48bxrq