javascript - Angular 拨动开关双向数据绑定(bind)

Question

我正在使用 ng2-datepicker和 ui-switch

模板看起来像这样

  <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)"},
     .....

]

我得到日期并像这样用 *ngFor 遍历它们

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))
}

基本上我想要的行为是这样的:

1. 使用日期选择器选择一天。如果所选日期不在日期中，则将 ui-switch 开关默认设置为打开:FirebaseListObservable。

2. 如果所选日期在以下日期中则关闭:FirebaseListObservable。

3. 并让 ui-switch 切换将它添加或从列表中删除，具体取决于它是否已经存在。

除最后一部分外，一切正常，我似乎无法创建一个函数来检查列表中是否存在日期字符串，并且还让切换反射(reflect)这一点。

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);
}

此函数将请求一个日期字符串和一个日期列表，如果在其中找到则返回日期，如果未找到则返回未定义。

现在你可以简单地使用一个 bool 值作为toogle:

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