Angular2 - mise à Jour de l'INTERFACE utilisateur, après la suppression de
J'ai un angular2 application dont le backend est en java. J'ai une liste de clients. Quand je clique pour supprimer un client , le client est supprimée, mais la liste n'est pas mise à jour. Si j'ai actualiser manuellement la page, puis la liste des mises à jour. J'ai essayé de routage pour le composant de liste dans le abonnez-vous de supprimer la méthode mais qui ne fonctionne pas.
list-customers.component.html
<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index">
<td>{{ serial+1 }}</td>
<td>{{ customer?.firstName+' '+customer?.lastName}}</td>
<td>{{ customer.email}}</td>
<td>{{ customer.mobileNumber}}</td>
<td>{{ customer.streetAddress}}</td>
<td>{{ customer.priceList?.name}}</td>
<td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td>
<td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td>
</tr>
liste de clients.composante.ts
ngOnInit()
{
this.refreshCustomersList();
}
delete(customer)
{
this.userService.delete(customer.id)
.subscribe(
success=>
{
var index = this.customers.indexOf(customer, 0);
if (index > -1)
{
this.customers.splice(index, 1);
}
}
)
}
refreshCustomersList()
{
this._authHttp.get(
this.appService.getApiUrl() + "api/customer/list"
)
.map(res=>res.json())
.subscribe(
successResponse=>
{
this.customers = successResponse.data.customers;
},
() => console.log("Request Completed")
)
}
}
OriginalL'auteur usmanwalana | 2016-09-16
Vous devez vous connecter pour publier un commentaire.
Essayez d'appeler
this.refreshCustomersList();
dans votredelete
fonction comme ceci:Cela permettra de mettre à jour le
customers
tableau après qu'un client est supprimé.OriginalL'auteur jhhoff02
Épissure sera de retour l'élément supprimé au lieu d'utiliser la tranche de retourner la matrice après la suppression, à l'instar de :-
OriginalL'auteur Alok Kamboj
Au lieu d'obtenir l'ensemble de la liste à partir de l'API de nouveau, nous pouvons définir la liste de clients comme suit. Il a travaillé pour moi:
OriginalL'auteur Rajat Malhotra
Entrez le code suivant Dans le HTML:
OriginalL'auteur Richa
vous pouvez utiliser le tableau JavaScript filtre comme ceci.
OriginalL'auteur patelarpan