Question

我正在尝试在数据库中对集合进行更新，如果可以，我想为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);
  }

服务器调用后更新页面而不刷新角度5

0 个答案: