Question

我正在使用Angular 7创建一个调度程序，我正在使用一个常规的HTML表。该表内的数据是通过Firebase提供的，当我添加或删除约会时，这些数据会完美更新。但是当我更改星期时，HTML表的标题不会随着新日期刷新。

我在数据源表（日期数组）上实现了一个rxjs Observable

组件：

<table class="tableweek">
  <thead>
    <tr>
      <th class="header_time"></th>
      <th class="header_week" *ngFor="let day of tabDays">{{ day | weekday }}</th>
    </tr>
  </thead>
  <tbody>

    <tr *ngFor="let hour of tabHours; let i = index">
      <td class="col_time">{{hour | hourFormat}}</td>
      <td class="col_week" *ngFor="let day of tabDays; let j = index" id="h-{{j}}-{{i}}" (click) = "newAppointment(modalAppointment, j, i)">

      </td>
    </tr>

  </tbody>
</table>

.ts：

 import {Observable} from 'rxjs';
 import { of } from 'rxjs';

 .....

 tabDays: Date[] = [];
 tabDaysObs: Date[] = [];

 ngOnInit() {
  initTabDays();
 }

initTabDays() {
  this.getTabDays().subscribe(dayslist => 
    {
      this.tabDays = this.tabDaysObs;
    }
  );
}

getTabDays(): Observable<Date[]> {
  var dt = new Date(this.currentWeek.date_start);
  while (dt <= this.currentWeek.date_end) {
    this.tabDaysObs.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
  }
  return of(this.tabDaysObs);
}

当我更新当前星期时，getTabDays会再次被调用，但不会刷新。

是我的代码还是无法动态刷新常规html表的标头？

Answer 1

尝试以下方法

initTabDays() {
  this.getTabDays().subscribe(dayslist => 
    {
      setTimeout(()=>{    //<<<---    using ()=> syntax
         this.tabDays.length = 0;
         this.tabDays = this.tabDaysObs;
       }, 0);
    }
  );
}

Answer 2

我解决了我的问题，但我不知道为什么会有这种行为。

我用来选择新日期的日历在另一个组件的导航栏中。我从导航栏组件中调用了主组件中的一个函数来更新日期数组，但它没有刷新计划程序。

但是，当我将日历移到主要组件中时，它就起作用了。

如果有人知道为什么...

可以在Angular 7中使用observable更新吗？

2 个答案: