有这个父组件'SalesListComponent'
<div class="container">
<div>
<h3>Total Venda: R${{totalCashierDay}}</h3>
<div *ngFor="let sale of salesListAggrouped" class="saleCard">
<app-modal-receipt [sales]="sale"></app-modal-receipt>
</div>
</div>
</div>
它渲染了许多我在多个地方使用的子组件“ModalReceiptComponent”。
可视化(红色:父组件,绿色:子组件)
我正在尝试学习观察者并使用这种方法
export class HubService {
sales_list: sales[] = [];
constructor() {
this.sales_list = getCachedSales();
}
getSales() {
const sales = of(this.sales_list);
return sales;
}
addSale(sale: sales) {
this.sales_list.push(sale);
saveCacheSales(this.sales_list);
}
addSales(sale: sales[]) {
this.sales_list = this.sales_list.concat(sale);
saveCacheSales(this.sales_list);
}
editSales(sales: sales[]){
this.sales_list = sales;
saveCacheSales(this.sales_list);
}
deleteSales(sales: sales[]){
this.sales_list = this.sales_list.filter(x => x.idDate !== sales?.[0]?.idDate);
this.editSales(this.sales_list);
}
使用“of”观察者方法处理销售列表中的 CRUD 的服务。
在'sales-list-component.ts'中只需订阅构造函数中的道具列表
export class SalesListComponent {
salesList: sales[] = [];
constructor(public dialog: MatDialog, private hubService: HubService) {
this.hubService.getSales().subscribe(sales => {
this.salesList = sales;
});
}
在'modal-receipt-component.ts'中我在点击事件中使用了删除方法
deleteSales(){
this.hubService.deleteSales(this.sales);
window.location.reload();
}
}
问题是,在不重新加载整个页面的情况下,我无法识别 salesList 更新的事件和“重新渲染”父组件以更新新的 salesList 而无需删除记录。
有人可以帮助我吗?
到目前为止,只有 window.location.reload() 已经解决。
首先在父级中为构造函数中的代码创建一个新方法并在
constructor
上调用它,然后移动删除销售
export class SalesListComponent {
salesList: sales[] = [];
refreshSales() {
this.hubService.getSales().subscribe(sales => {
this.salesList = sales;
});
}
constructor(public dialog: MatDialog, private hubService: HubService) {
this.refreshSales();
}
deleteSales(sales: any){
this.hubService.deleteSales(sales);
this.refreshSales();
}
}
}
然后你需要做一个事件发射器并从 html 触发事件
<div *ngFor="let sale of salesListAggrouped" class="saleCard">
<app-modal-receipt [sales]="sale" (deleteEmitter)="deleteSales($event)></app-modal-receipt>
</div>
</div>
在子组件中,您需要触发发射器。
@Output() deleteEmitter: EventEmitter<any> = new EventEmitter<void>();
deleteSales(){
this.deleteEmitter.emit(this.sales);
}
}