角FullCalendar

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

从满载宪兵-角度提取

如果要修改复杂对象(如headerToolbar或events )的选项，则需要复制该对象，进行更改，然后重新分配。如果您不想这样做，您可以让角连接器递归地搜索对象中的更改，尽管这会带来轻微的性能代价。将deepChangeDetection支柱设置为"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>

正如docs中所述，请记住，第二个选项可能会影响应用程序的性能。

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

干杯

Answer 2

根据组件文档

如果要修改复杂对象(如headerToolbar或events )的选项，则需要复制该对象，进行更改，然后重新分配。如果您不想这样做，您可以让角连接器递归地搜索对象中的更改，尽管这会带来轻微的性能代价。将deepChangeDetection支柱设置为"true"： <全日历deepChangeDetection=“真”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};
  }
);