过滤数组并将其自动显示在 Angular 视图中

Question

我可以从数据库中发布和获取数据，但它仅在刷新时更新视图中的值。据我了解，过滤器方法会创建一个新数组，所以我不明白为什么它不会自动显示。

这是堆栈闪电战：https://stackblitz.com/edit/angular-6ni1pg

下面是组件：

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

这是 html

<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>

Answer 1

this.postsService.fetchPosts().subscribe(...)只会执行一次，它不会继续轮询API，所以在onCreatePost中，你需要再次调用this.postsService.fetchPosts((.subscribe，或者将this.postsService.createAndStorePost的结果添加到数组中。

发布后重新加载

ngOnInit() {
this.loadPosts();
}
onCreatePost(postData: Transaction) {
this.postsService.createAndStorePost(postData.name, postData.amount, postData.category)
.subscribe(() => this.loadPosts());
}
loadPosts() {
this.postsService.fetchPosts().subscribe(posts => {
this.transactions=posts; 
this.groceriesList=posts.filter(item => item.category==="Groceries");
this.transList=posts.filter(item => item.category==="Transportation");
});
}

并在 post.service.ts 中更改 createAndStore

createAndStorePost(name: string, amount: number, category: string) {
const postData: Transaction = {name: name, amount: amount,  category: category}
return this.http
.post<{name: string }>(
'https://budget-dfc78.firebaseio.com/posts.json',
postData
);
}

将发布结果添加到数组

onCreatePost(postData: Transaction) {
this.postsService.createAndStorePost(postData.name, postData.amount, postData.category)
.subscribe(transaction {
this.transactions.push(transaction);
if (transaction.category==="Groceries") {
this.groceriesList.push(transaction);
}
if (transaction.category==="Transportation") {
this.transList.push(transaction);
}
});
}

Answer 2

将 ngOnInit 方法更改为

ngOnInit() {
this.postsService.fetchPosts().subscribe(posts => {
this.transactions=posts; 
},
()=>{},
()=>{
this.groceriesList=this.transactions.filter(item => item.category==="Groceries")
this.transList=this.transactions.filter(item => item.category==="Transportation")
}
});