I have successfully managed to post and retrieve data from a database. However, I am facing an issue where the view only updates the value upon refreshing. It seems like the filter method is creating a new array, so I am puzzled as to why it's not showing automatically.
Check out the stackblitz example: https://stackblitz.com/edit/angular-6ni1pg
Below is the component code:
export class TransactionsComponent implements OnInit {
transactions: Transaction[];
groceriesList: Transaction[];
transList: Transaction[];
constructor(private postsService: PostService) {}
ngOnInit() {
this.postsService.fetchPosts().subscribe(posts => {
this.transactions=posts;
this.groceriesList=posts.filter(item => item.category==="Groceries")
this.transList=posts.filter(item => item.category==="Transportation")
});
// this.refreshGroceries()
}
And here is the HTML structure:
<div class="row">
<div class="col-xs-10">
<ul class="list-group">
<a
class="list-group-item"
style="cursor:pointer"
*ngFor="let transaction of transactions">
{{ transaction.name }} ({{ transaction.amount }}) - ({{ transaction.category }})</a>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<h1>Groceries</h1>
<ul class="list-group">
<a
class="list-group-item"
style="cursor:pointer"
*ngFor="let grocery of groceriesList">
{{ grocery.name }} ({{ grocery.amount }}) - ({{ grocery.category }})</a>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<h1>Transportation</h1>
<ul class="list-group">
<a
class="list-group-item"
style="cursor:pointer"
*ngFor="let item of transList">
{{ item.name }} ({{ item.amount }}) - ({{ item.category }})</a>
</ul>
</div>
</div>