Question

模板看起来像这样

  <ng-datepicker [(ngModel)]="date" />

  <ui-switch [(ngModel)]="enable"></ui-switch>

我在firebase中有一个类似于

的日期列表

date: [
    {"-23dssfr74y0127yidas": "Wed Jan 10 2018 00:00:00 GMT-0500 (EST)"},
    {"-23dvrbeby012745ffs": "Thu Jan 11 2018 00:00:00 GMT-0500 (EST)"},
     .....

]

我得到日期并用* ng这样循环遍历它们

getDatesList(): FirebaseListObservable<any[]> {
  this.dates = this.db.list(this.datePath );
  return this.dates;
 }

<ul class="date-list" >
      <li class='date-item' *ngFor="let date of dates; let i = index;" (click)='select.emit(date)'>{{ date.$value | date:'yMMMMEEEEd' }}</li>
</ul>

我有一个带有BehaviorSubject的scheduleService

private dateSource = new BehaviorSubject<string>(new Date(Date.now()).toString());

 selectedDate$ = this.dateSource.asObservable();

在组件中，我订阅了它的值

this.dateSubscription = this.scheduleService.selectedDate$
.subscribe(date => {
  this.selectedDate = date;
});

当我从* ngFor列表中选择日期时，我更新了日期选择器订阅的selectedDate $，就像这样

/// in the component 
select(event) {
 this.scheduleService.updateDate(event.$value);
  }

/// in the service
updateDate(date) {
this.dateSource.next(date);

  }

我使用这两种方法在列表中添加或删除日期。

 addDate(date: any): void  {
    this.dates.push(date)
    .catch(error => this.handleError(error))
  }


removeDate(key: string): void {
    this.dates.remove(key)
      .catch(error => this.handleError(error))
}

基本上我想要的行为是：

使用日期选择器选择一天。如果所选日期不在日期中，则将ui-switch切换默认设置为on：FirebaseListObservable。
关闭：FirebaseListObservable。
让ui-switch切换在列表中添加或删除它，具体取决于它是否存在。

除了最后一部分，一切都有效，我似乎无法创建一个函数来检查列表中是否存在日期字符串，并且还有切换反映了该函数。

Answer 1

我似乎无法理解你的代码，也许不会分裂它本来会更好。

无论如何，你要求一个函数来检查列表中是否存在日期，所以我会给你写一个：

findDate(date: string, list: any[]) { // Since your date is in string
  const d = new Date(date).getTime();
  const dates = list.map(_d => new Date(_d).getTime());
  return dates.find(_d => _d === d);
}

此函数将要求输入日期和日期列表的字符串，如果在日期中找到日期，则返回日期，如果找不到，则返回undefined。

现在您可以简单地为toogle使用布尔值：

this.enable = this.findDate(this.selectedDate, this.getDatesList()) ? true : false;

角度切换开关双向数据绑定

1 个答案: