In ngOnInit() I have a subscription on a Subject, which sends new data when I get a new response in my service from the EventSource:
this._orderService.onNewOrderLoaded$
.subscribe(order => {
this.orders.push(order)
this.orders.sort((a, b) => b.id - a.id)
this.orders = this.orders.slice()
this.notify()
})
this._orderService.openSSEConnection()
In my template I have a simple table, that displays orders:
<tr *ngFor="let order of orders">
...
</tr>
But component doesn't rerender when in subscription in ngOnInit() I get new orders and change orders' model using .slice(). So I detect changes manualy using this._ref.detectChanges(). It is the first question: How can I rerender component without detectChanges() when I get a new order in subscription?
And the seconds problem is that when I use detectChanges() and rerender table of orders, (click) method doesn't update model of new order too. (click) of <td></td> calls function:
viewOrder(order: Order) {
this.selectedOrder = { ...order }
this.isInfoModalOpened = true
}
This function changes isInfoModalOpened and selectedOrder so modal component can be displayed:
<app-modal-component *ngIf="isInfoModalOpened" [order]="selectedOrder">
But it doesn't work too, so or I need to call detectChanges() manualy or I need to click on some element, that will cause changes detection.