Angular 中的完整日历

Question

任何人都可以向我解释一下我在下面的 http get 语句中做错了什么吗？我正在尝试动态填充 FullCalendar 事件，但未添加任何事件。该服务似乎返回与“of”相同的结果。可运行代码可在此处获得：https://stackblitz.com/edit/angular-ivy-1kat2n?file=src/app/app.component.ts

export class AppComponent implements OnInit {
  events1 = [];
  events2 = [];
    
  calendarOptions1 = {
    ...
    events: this.events1,
  };

  calendarOptions2 = {
    ...
    events: this.events2,
  };
  constructor(public http: HttpClient) {}

  ngOnInit() {
    of([
      {"title":"event 1","start":"1900-01-02T11:00:00","end":"1900-01-02T12:00:00"},
      {"title":"event 2","start":"1900-01-02T11:00:00","end":"1900-01-02T12:00:00"}])
      .subscribe((res) => {
        Object.assign(this.events1, res);
      }
    );

    this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
      .subscribe(data => {
        Object.assign(this.events2, data);
      }
    );
  }
}

这是我的 HTML:

<full-calendar [options]="calendarOptions1"></full-calendar>
<full-calendar [options]="calendarOptions2"></full-calendar>

Answer 1

摘自FullCalendarDocs-Angular

If you want to modify options that are complex objects, like headerToolbar or events, you’ll need to make a copy of the object, make your change, and then reassign it. If you DO NOT want to do this, you can have the angular connector recursively search for changes within your objects, though this comes at a slight performance cost. Set the deepChangeDetection prop to "true"

所以你有两个选择：

直接重新分配calendarOptions.events：

this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
 .subscribe(data => this.calendarOptions2.events = data);

或将 deepChangeDetection 设置为 true:

<full-calendar [options]="calendarOptions2" [deepChangeDetection]="true"></full-calendar>

如文档中所述，请记住第二个选项可能会对应用性能产生影响。

注意：of() 版本有效，因为它是同步处理的，因此完整日历会使用有效数据进行初始化。作为测试，如果您将 of 配置为运行并使用 asyncScheduler of([...], asyncScheduler)，您可以看到它也停止工作。

干杯

Answer 2

根据component documentation：

If you want to modify options that are complex objects, like headerToolbar or events, you’ll need to make a copy of the object, make your change, and then reassign it. If you DO NOT want to do this, you can have the angular connector recursively search for changes within your objects, though this comes at a slight performance cost. Set the deepChangeDetection prop to "true":

<full-calendar deepChangeDetection="true" [options]="calendarOptions">

所以你可以通过属性

[deepChangeDetection]="true"

或重新创建对象

this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
  .subscribe(data => {
    Object.assign(this.events2, data);
    this.calendarOptions2 = {...this.calendarOptions2, events: data};
  }
);

Angular 中的完整日历

FullCalendar in Angular

observable

angular

fullcalendar-5