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

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

1 个答案: