服务更新时未更新 Angular 组件

Question

我有一个带有 events 服务的 Angular 2 应用程序，该服务有一个 delete 方法：

let EVENTS: TimelineEvent[] = [
    {
      event: 'foo',
      timestamp: 1512205360,
    },
    {
      event: 'bar',
      timestamp: 1511208360,
    }
  ];

@Injectable()
export class EventsService {

  getEvents(): Promise<TimelineEvent[]> {
    return Promise.resolve(EVENTS);
  }

  deleteEvent(deletedEvent) {
    EVENTS = EVENTS.filter((event) => event.timestamp != deletedEvent.timestamp);
  }
}

我的主组件显示这些事件，并使用onClick 处理程序来调用服务的deleteEvent 方法：

@Component({
  selector: 'my-app',
  providers: [EventsService],
  template: `
    <div>
      <event *ngFor="let timelineEvent of events" [timelineEvent]="timelineEvent" [deleteEvent]="deleteEvent"></event>
    </div>
  `,
})
export class App implements OnInit {
  constructor(private eventsService: EventsService) {

  }
  events

  getEvents(): void {
    this.eventsService.getEvents().then(events => this.events = events);
  }

  deleteEvent(event): void {
    this.eventsService.deleteEvent(event); 
  }

  ngOnInit(): void {
    this.getEvents();
  }
}

我可以通过console.logging EVENTS 数组看到它已正确更新。但是显示没有更新。我哪里错了？

此处的示例代码：https://plnkr.co/edit/cENnHeHORnDT50RaTyoI。

Answer 1

您在服务中删除事件，而不是在组件中。您的组件中的事件列表保持未更新。

解决方法：

1 - 使您的服务返回承诺的 deleteEvent 方法：

deleteEvent(deletedEvent) {
    EVENTS = EVENTS.filter((event) => event.timestamp !== deletedEvent.timestamp);
    return Promise.resolve("Successfully deleted");
}

2 - 在您的组件中，在删除操作成功时重新加载事件：

deleteEvent = (event) => {
    this.eventsService.deleteEvent(event).then(res => this.getEvents()); 
}