Angular2-削除後のUIの更新

Question

私はバックエンドがjavaであるangular2アプリを持っています。私は顧客のリストを持っています。顧客を削除するためにクリックすると、顧客は削除されますが、リストは更新されません。手動でページを更新すると、リストが更新されます。私は、削除メソッドの購読でリストコンポーネントにルーティングしようとしましたが、それは動作しません。

リスト-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> 

リスト-customers.component.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") 
      ) 

    } 
} 

Answer 1

このようなあなたのdelete機能で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); 
        this.refreshCustomersList(); 
       } 
      } 
     ) 

} 

これは、お客様が削除された後にcustomersアレイを更新します。