时间戳

首页 > 解决方案 > 我从我的数据库中删除了一个数据行，但在我刷新它之前没有从我的网页中删除。如何立即从 Angular5 的表中删除该行

database - 我从我的数据库中删除了一个数据行，但在我刷新它之前没有从我的网页中删除。如何立即从 Angular5 的表中删除该行

问题描述

我将 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 中使用 click 事件调用的方法：

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

那是 my-profile.component.html 带有一个 ngif 来测试 db 中数据的存在和一个 ngfor* 来创建一个带有 db 数据的表：

        <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 工作得很好，所以问题一定出在我的角度代码中。谢谢大家！

标签： databaseangularasp.net-web-apirouteshttp-delete

解决方案

因为您正在使用*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;}
   );
}

推荐阅读