我从数据库中删除了一个数据行，但在刷新之前不会从网页中删除.我如何才能立即从Angular5中的表中删除该行

Question

我使用WebApi作为后端，Angular 5作为前端，WebApi连接到一个数据库，我从中获取要包含在我的网站中的数据。当我按下"删除"按钮时，数据会从我的数据库中提交，但不会从我的网页中提交，在Angular中(据我所知，我是一个初学者(，页面会立即刷新。控制台没有给我一个错误，所以我认为这可能是一个路由配置错误。也许我会使用ActivatedRoute，因为页面有

RouterModule.forChild([
{path:'mioprofilo', component: MyProfileComponent},

无论如何，我在my-profile.component.service.ts中删除的方法是：

deleteRelative(id: number): Observable<Relative>{
const url =  `${this.relativeUrl}/${id}`;
return this.http.delete<Relative>(url).pipe(
tap(rel => console.log( `deleted relative id=${id}`)),
catchError(this.handleError)
);
}       

这是我在my-profile.component.ts:中用点击事件调用的方法

delete(id:number): void {
this.myProfileService.deleteRelative(id).subscribe(
data=>{this.route;
});

这就是my-profile.component.html，它有一个ngif来测试数据库中数据的存在，还有一个ngfor*来创建一个包含数据库数据的表：

<table *ngIf = 'relatives && relatives.length'
class="table" id="myTable" style="margin:20px; width: 90%;border-style: outset">
<thead>
<tr>
<th>Cognome</th>
<th>Nome</th>
<th>Telefono</th>
<th>Relazione</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor ='let rel of relatives'>
<td>{{rel.lastName}}</td>
<!-- <td><input type="text" name="name" [(ngModel)]=rel.lastName></td> -->
<td>{{rel.firstName}}</td>
<td>{{rel.phone}}</td>
<td>{{rel.relationType}}</td>
<td>
<a (click)="delete(rel.relativeId)" ><img src="/Images/elimina.png"/></a>
</td>
<td>
<input class="Caregiver" type="checkbox" value="Caregiver">
<span>Caregiver</span>
</td>
</tr>
</tbody>
</table>

我认为如果我在我的app.component.module.ts:下面发帖，可以帮助我找到解决方案

@NgModule({
declarations: [
AppComponent,
WelcomeComponent//,
//CalendarComponent,
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{path: 'home', component: WelcomeComponent},
{path: '', redirectTo:'home',pathMatch:'full'},
{path:'**', redirectTo:'home', pathMatch:'full'}
]),
MyProfileModule,
CalendarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

如果你需要我的其他代码，不要害怕问我。WebApi工作得很好，所以问题一定是在我的角度代码中。谢谢大家！

Answer 1

因为您将*ngFor ='let rel of relatives'用于<tr>，所以您所需要做的就是从relatives数组中删除已删除的数据。这将触发angular用新数据刷新该组件；从表中删除已删除的项目。

为此，您可以使用splice:

relatives.splice(arrayIndex, 1);

所以。。。

delete(id:number): void {
this.relatives.splice(arrayIndex, 1);
this.myProfileService.deleteRelative(id).subscribe(
data=>{this.route;}
);
}