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

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

这是my-profile.component.html，其中包含一个用于测试db中数据是否存在的ngif以及一个用于使用db数据创建表的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数组中删除已删除的数据即可。这将触发角度来用新数据刷新该组件；从表中删除已删除的项目。

为此，您可以使用splice：

relatives.splice(arrayIndex, 1);

所以...

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

我从数据库中删除了一个数据行，但从我的网页中删除了一个数据行，直到刷新它为止。我如何立即从Angular5中的表中删除该行

1 个答案: