Я удаляю данные из моей базы данных, но не с моей веб-страницы, пока не обновлю их.Как я могу удалить эту строку сразу из моей таблицы в Angular5 - PullRequest
Новая
       12

Я удаляю данные из моей базы данных, но не с моей веб-страницы, пока не обновлю их.Как я могу удалить эту строку сразу из моей таблицы в Angular5

0 голосов
/ 25 ноября 2018

Я использую 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)
    );
}

И это методя вызываю событие click в 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 работает очень хорошо, поэтому проблема должна быть в моем угловом коде.Спасибо всем!

1 Ответ

0 голосов
/ 25 ноября 2018

Поскольку вы используете *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;}
   );
}
...