обновить страницу после вызова сервера без обновления угловых 5 - PullRequest
0 голосов
/ 18 декабря 2018

Я пытаюсь обновить базу данных для коллекции, и если все в порядке, я хочу установить новый цвет фона для div.Мой код не устанавливает цвет.Это работает только тогда, когда я обновляю страницу и загружаю из базы данных свои сохраненные данные.Обновление базы данных и цветового метода вызывается, когда я нажимаю на элемент div из дочернего компонента.У меня есть родительский компонент и дочерний элемент, также я использую https://mattlewis92.github.io/angular-calendar/#/clickable-events

Как передать от родителя к дочернему элементу информацию о том, что мои данные были сохранены, и изменить цвет?

Дочерний компонент:

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'mwl-demo-component',
  templateUrl: 'month-calendar.component.html',
})
export class MonthCalendarComponent implements OnInit {

  view = 'month';

  @Input() viewDate: Date = new Date();
  @Input() holidayClicked: Function;

  daySelectedCssClass: string = day_selected_cell;
 ngOnInit() {
    this. boundCallBack = this.callback.bind(this);
  }

  dayClicked(day: CalendarMonthViewDay): void {
    const sub = this.holidayClicked(day);
    sub.subscribe(isHoliday => {
      if (isHoliday) {
        delete day.cssClass;
      } else {
        day.cssClass = 'cal-day-selected';
      }
    });
  }

HTML-код

<mwl-calendar-month-view
      *ngSwitchCase="'month'"
      [viewDate]="viewDate"
      (dayClicked)="dayClicked($event.day)">
</mwl-calendar-month-view>

родительский компонент:

export class CalendarComponent implements OnInit {
  @ViewChildren(MonthCalendarComponent) months: any[];

constructor(private calendarService: CalendarService) {
  }

  ngOnInit() {
 this.holidayClicked = function (day: CalendarMonthViewDay): Observable<boolean> {
        const username = 'username';
        const holiday = new Holiday();
        holiday.date = day.date;

        return this.calendarService.updateEmployee(username, holiday).map(
          response => {
            if (holiday) {
              return true;
            } else {
              return false;
            }
          });
   };
}

  public getHolidayClicked() {
    return this.holidayClicked;
  }

}

HTML-код

<div class="container-calendar1">
    <mwl-demo-component [holidayClicked]="holidayClicked" ></mwl-demo-component> 
</div>

и метод обслуживания

updateEmployee(userName: string, holiday: Holiday): Observable<Holiday> {
    const url = this._employeeUrl + '/holiday?userName=' + userName;
    return this.http.put(url, holiday)
    .map((res: Holiday) => res)
    .catch(this.handleError);
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...