如何在 Angular5 中删除后刷新页面

我正在制作一个平均堆栈购物应用程序(Angular 5)。我制作了一个管理产品组件，其中包含所有产品的列表和一个删除按钮。删除按钮有效，但产品到目前为止一直列在表中，因为它已从数据库中删除。所以，我想知道是否有任何可能的方法可以在删除后重新渲染或刷新组件。我试图导航到同一页面，但它不起作用，因为角度不允许这样做。请谁能帮忙。我找不到关于堆栈溢出的查询的任何具体答案，所以我不得不问它。

我的管理产品组件是：-

import { Component, OnInit } from '@angular/core';
import { ProductManageService, ProductDetails } from '../product-manage.service';
import { AllService } from '../all.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-manage-product',
templateUrl: './manage-product.component.html',
styleUrls: ['./manage-product.component.css']
})
export class ManageProductComponent implements OnInit{
prodData : ProductDetails = {
prodName: '',
prodPrice: '',
prodImage: '',
prodSize: ''
}
data: any=[];
constructor(private add:ProductManageService,
private router: Router,
private http:HttpClient,
private allService :AllService,
private location : Location) { }
addProduct(){
this.add.addProduct(this.prodData).subscribe(()=>{
console.log("SENT",this.prodData);
},(err)=>{
console.log("Error",err);
})
}
delFunc(id){
// console.log("Delete ",id);
this.add.deleteProd(id);
this.router.navigateByUrl("/reload");
}
ngOnInit() {
this.allService.getAlldata().subscribe(data =>{
console.log("data",data);
this.data = data;
});
console.log(this.data);

}
}

我的管理组件的html文件是：-

<div class="container">
<form (submit)="addProduct()">
<div class="form-group">
<label for="name">Product Name</label>
<input name="prodName" type="text" class="form-control" id="name" placeholder="Tshirt" [(ngModel)]="prodData.prodName">
</div>
<div class="form-group">
<label for="price">Price</label>
<input name="prodPrice" type="text" class="form-control" id="price" placeholder="1.1" [(ngModel)]="prodData.prodPrice">
</div>
<div class="form-group">
<label for="image">Price</label>
<input name="prodImage" type="text" class="form-control" id="image" placeholder="Link to image" [(ngModel)]="prodData.prodImage">
</div>
<div class="form-group">
<label for="size">Price</label>
<input name="prodSize" type="text" class="form-control" id="size" placeholder="M" [(ngModel)]="prodData.prodSize">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<table class="table table-hover">
<tr>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Size</th>
<th> </th>
</tr>
<tr *ngFor="let prod of data">
<td>{{ prod.prodName }}</td>
<td>{{ prod.prodPrice }}</td>
<td>{{ prod.prodSize }}</td>
<td>
<input type="button" class="btn btn-danger" routerLink="/reload" (click) = "delFunc(prod._id)" class="del-btn"  value="Delete">
</td>
</tr>
</table>
</div>

app.module.ts 如果您需要：-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AllService } from './all.service';
import {AuthGuardService} from './auth-guard.service';
import {AuthenticationService} from './authentication.service';
import { ProductManageService } from './product-manage.service';
import { AppComponent } from './app.component';
import { FrontComponent } from './front/front.component';
import { ContentComponent } from './content/content.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { ManageProductComponent } from './manage-product/manage-product.component';
const routes = [
{
path: '',
component: ContentComponent
},
{
path: 'product',
component: ProductDetailComponent
},
{ 
path: 'login',
component: LoginComponent 
},
{
path: 'register',
component: RegisterComponent
},
{
path: 'profile',
component: ProfileComponent,
canActivate: [AuthGuardService] 
},
{
path: 'manage',
component: ManageProductComponent,
},
{ path: 'reload',
redirectTo: 'manage',
pathMatch: 'full'
},
];
@NgModule({
declarations: [
AppComponent,
FrontComponent,
ContentComponent,
ProductDetailComponent,
RegisterComponent,
LoginComponent,
ProfileComponent,
ManageProductComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
HttpModule,
RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
}),
],
providers: [
AllService,
AuthenticationService, 
AuthGuardService,
ProductManageService
],
bootstrap: [AppComponent],
exports: [RouterModule]
})
export class AppModule { }

原因

您的表未更新，因为模型 (data) 在 API 调用后未更新。有几种方法可以更新模型，我建议在此答案中使用选项 3 或 2。

选项 1

正如一些人已经说过的，第一种方法是从视图模型中的数组中删除元素：

delFunc(id){
this.add.deleteProd(id);
this.data = this.data.filter(item => item.id != id);
}

这种方法的缺点是，即使项目已在前端删除，您如何确定它确实已成功从后端的数据库中删除？这意味着，即使this.add.deleteProd(id)无法正常工作并且对象实际上并未在后端删除，该项目也会从前端 HTML 表中删除。因此，您无法确定前端视图是否准确表示后端的现实。

选项 2

第二种方法是通过再次查询后端来"重新加载"表。这需要"最少的工作"，因为您所要做的就是简单地调用函数再次加载数据：

delFunc(id) {
this.add.deleteProd(id)
.subscribe(()=> {
this.fetchData();
});
}
ngOnInit() {
this.fetchData();
}
fetchData() {
this.allService.getAlldata().subscribe(data =>{
this.data = data;
});
}

在这里，您可以获得现实的"准确性"，但会牺牲性能，因为每次删除时都要进行两次 REST 调用。

选项 3

第三种方式需要"大部分工作"，但在现实的准确性和性能之间提供了折衷。基本上，您需要重写后端，以便在执行数据库删除后，后端 REST/API 方法返回现在在数据库中的新数据集。

然后，您可以在 Angular 组件中执行以下操作：

delFunc(id) {
this.add.deleteProd(id)
.subscribe(newData => {
this.data = newData;
});
}

这假定你能够控制后端代码。您可能需要改为执行this.data = newData.json();，具体取决于this.add.deleteProd(id)方法返回的内容。

选择最适合您情况的选项。让我知道这是否适合您。

您无需导航，应从用于创建模板的数据中删除已删除的产品。

delFunc(id){
// console.log("Delete ",id);
this.add.deleteProd(id);
const item = this.data.find(item => item.id === id);
this.data.splice(this.data.indexOf(item)));
}

当然，您可以触发数据重新加载并再次调用后端，这将是次优的。

无需重新加载页面，只需从模板端传递索引即可并在删除成功时从索引中删除该数据。

模板端

<tr *ngFor="let prod of data;let i = index">
....
<input type="button" class="btn btn-danger" (click) = "delFunc(prod._id,i)" class="del-btn"  value="Delete">
....
</tr>

组件侧：

delFunc(id , index){
// console.log("Delete ",id);
this.add.deleteProd(id).subscribe(()=>{
this.data.splice(index, 1);
});
}

您可以创建一个方法来获取所有数据，如下所示：

getAllData() {
this.allService.getAlldata().subscribe(data => {
this.data = data;
})
}

此方法可用作 Delete 函数中的回调方法。
像这样：

delFunc(id) {
this.add.deleteProd(id).subscribe(() => this.getAllData());
}

这样，每次发生删除时都会刷新数据。

更改点击事件以传入整个对象：

<input type="button" class="btn btn-danger" routerLink="/reload" (click) = "delFunc(prod)" class="del-btn"  value="Delete">

和你的 delFunc 喜欢：

delFunc(prod){
this.data.splice(this.data.indexOf(prod), 1);
this.add.deleteProd(prod._id);
}

您可以通过索引删除 this.data 上的产品。

为此更改代码：

嗡....

<tr *ngFor="let prod of data; let i = index;">

....

<input type="button" class="btn btn-danger" routerLink="/reload"
(click) = "delFunc(prod._id, i)" class="del-btn"  value="Delete">

.ts

delFunc(id, index){
// console.log("Delete ",id);
this.add.deleteProd(id, index);
this.data(index, 1);
//this.router.navigateByUrl("/reload");   }

无需刷新页面。因为角度是SPA(单页应用程序)之前，应用程序启动将由ngOnInit() =>函数加载。所以只要在函数中调用这个.ngOnInit();任何你想要的。

原因

选项 1

选项 2

选项 3

相关内容

最新更新

热门标签：