角组件时，服务更新

Question

我有一个角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 - 使您服务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()); 
}