각도 구성 요소는 서비스 업데이트가

Question

나는 delete 방법이있는 events 서비스와의 각도 2 응용 프로그램이있을 때 업데이트되지 :

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); 
    } 
} 

내 주요 구성 요소가 이러한 이벤트를 표시하고 서비스의 deleteEvent를 호출하는 onClick 핸들러를 사용하여 방법

@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

구성 요소가 아닌 서비스에서 이벤트를 제거합니다. 구성 요소의 이벤트 목록은 업데이트되지 않은 상태로 유지됩니다. 삭제 조치의 성공 이벤트를 다시로드, 그리고 구성 요소에 -

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

: 2 : -

1을 약속 반환 서비스의 deleteEvent 방법을 확인하십시오

하는 방법입니다 그것을 해결하기 위해

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