javascript - 服务更新时 Angular 组件未更新

Question

我有一个 Angular 2 应用，它有一个 events 服务，它有一个 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 - 让您的服务返回 promise 的 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()); 
}