Можно ли обновить <th>с наблюдаемой в Angular 7? - PullRequest
Новая
       18

Можно ли обновить <th>с наблюдаемой в Angular 7?

0 голосов
/ 14 февраля 2019

Я создаю планировщик, используя 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-таблицы?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Я решил свою проблему, но не знаю, почему у меня такое поведение.

Календарь, который я использовал для выбора новой даты, был в моей навигационной панели в другом компоненте.Я вызвал из компонента панели навигации функцию внутри моего основного компонента, чтобы обновить мой массив дат, и он не обновил планировщик.

Но когда я переместил календарь в свой основной компонент, он сработал.

Если у кого-то есть идея, почему ...

0 голосов
/ 14 февраля 2019

Попробуйте следующие способы 

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