Angular and RxDB infinite loop

In the component I have a simple table were one of the columns calls a function getOrderItems() to get order corresponding items:

<p-table
[value]="orders$()"
[tableStyle]="{ 'min-width': '50rem', 'margin-top': '16px' }"
>
<ng-template pTemplate="header">
<tr>
<th>Id</th>
<th>Contact</th>
<th>Total</th>
<th>Status</th>
<th>Item</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-order>
<tr>
<td>{{ order.id }}</td>
<td>{{ order.contact }}</td>
<td>{{ order.total }}</td>
<td>{{ order.status }}</td>
<td>{{ getOrderItems() }}</td>
</tr>
</ng-template>
</p-table>


Here is the getOrderItems() function:

getOrderItems() {
const orderItems = this.ordersService.orderItems();

console.log(orderItems);
return orderItems;
}


Finallt here is the function inside ordersService:

orderItems() {
let orderItems: OrderItem[] = [];
this.databaseService
.getDatabase()
.orderItem.find()
.exec()
.then((doc) => {
orderItems.push(doc);
})
.catch((e: RxError) => {
return Promise.reject(
'Error while looking for order items: ' + e.message,
);
});

return orderItems;
}


The issue I'm getting infinite loop because of getOrderItems() function and I have no idea why?

Continue reading...