在api上執行編輯或刪除操作後，角度2視圖不更新

Question

我在顯示列表的同一頁上有刪除操作。當我執行刪除時，api中的數據發生了變化，但它並未反映在列表本身中。

我嘗試了幾件事情之一，即將已刪除的對象從可觀察數組中拉出來。這不起作用，這不是我想要的，因爲它不會反映其他用戶是否添加或刪除了列表中的「人員」。

現在唯一可行的是在刪除操作完成後觸發api調用，但效率不高。

在我看來，正確的方法將觸發或刷新訂閱，以便它返回到api獲取新數據並添加新數據或刪除數據庫中不存在的數據到可觀察數組。

有沒有辦法使用observable和RxJs來完成它？

謝謝大家幫忙

import { Component, OnInit } from '@angular/core'; 
 
import {Observable} from 'rxjs/Observable'; 
 

 
import {PeopleService} from '../shared/people.service'; 
 
import {People} from '../shared/people.model'; 
 
import {ToastService} from '../../../core/toast/toast.service'; 
 

 
@Component({ 
 
    selector: 'app-people-list', 
 
    templateUrl: './people-list.component.html', 
 
    styleUrls: ['./people-list.component.css'] 
 
}) 
 
export class PeopleListComponent implements OnInit { 
 

 
    peoples: Observable<People[]>; 
 
    constructor(private peopleService: PeopleService, 
 
    private toastService: ToastService) { } 
 

 
    getPeoples() { 
 
    this.peoples = this.peopleService.getPeoples() 
 
    } 
 

 
    deletePeople(people: People) { 
 
    this.peopleService.deletePeople(people) 
 
    .subscribe(
 
    () => { 
 
     this.toastService.activate(' Deleted', 'People', 'danger'); 
 
     }, 
 
     (err) => console.log('Debug:deletefailed', err) 
 
    ); 
 
    } 
 

 
    ngOnInit() { 
 
    this.getPeoples(); 
 
    } 
 

 
}

<div> 
 
    <h3>People List</h3> 
 
    <hr/> 
 
    <a href="" [routerLink]="['/peoples', 'new']"><button class="btn btn-primary">Add People</button></a> 
 
    <table class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
     <tr> 
 
     <th>Id</th>   
 
     <th>Number of People</th> 
 
     <th>Modify</th> 
 
     <th>Delete</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="let people of peoples | async"> 
 
     <th>{{people.id}}</th> 
 
     <td>{{people.purchaseCount}}</td> 
 
     <td><button href="#" [routerLink]="['/peopleDetail', people.id]" class="btn btn-sm btn-info">Edit/Detail</button></td> 
 
     <td><button (click) = "deletePeople(people)" class="btn btn-sm btn-danger">Delete</button></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

這是沒有意義的有人民列表作爲流，如果你想操作就可以了。

export class PeopleListComponent implements OnInit { 

    peoples: People[]; 
    constructor(private peopleService: PeopleService, 
    private toastService: ToastService) { } 

    deletePeople(people: People) { 
    this.peopleService.deletePeople(people) 
    .subscribe(
    () => { 
     this.toastService.activate(' Deleted', 'People', 'danger'); 

     //***Remove people from the peoples list here**// 

     }, 
     (err) => console.log('Debug:deletefailed', err) 
    ); 
    } 

    ngOnInit() { 
    this.getPeoples().subscribe(peoples => this.peoples = peoples); 
    } 

} 

...

<tr *ngFor="let people of peoples"> 

並重新綁定到人民名單迴應是低效的以任何方式，因爲視圖會無論如何都要更新。

因爲心不是任何新的價值的觀點並不簡單地更新其原因正如你說你總是可以從數據庫中獲取新的數據並更新列表被推到它

Answer 2

。但唯一的問題是你將不得不提出另一個API請求，這似乎是不必要的。

來到你的觀點

它可以追溯到API獲取新的數據，並添加新的或刪除不存在於數據庫中，以可觀察到的陣列的一個。

你爲什麼不在你的刪除訂閱中做getPeoples（）。

deletePeople(people: People) { 
     this.peopleService.deletePeople(people) 
     .subscribe(
      (success) => { 
      this.toastService.activate(' Deleted', 'People', 'danger'); 
      this.getPeoples(); 
      }, 
      (err) => console.log('Debug:deletefailed', err) 
     ); 
    } 

Answer 3

如果我理解正確，問題不在於更新Component本身？因爲Nicolas的回答會有幫助......儘管我會建議不要將陣列的指針改爲最佳做法。 相反的：

peoples: Observable<People[]>;  
getPeoples() { 
    this.peoples = this.peopleService.getPeoples() 
} 

務必：

peoples: Array<People> = []; 
getPeoples() { 
    this.peoples.length = 0; 
    this.peoples.push(...this.peopleService.getPeoples()); 
} 

---

如果您正在尋找實時更新跨越用戶可以創建自刷新服務 - 儘管這會增加API調用哪個將不可避免地耗費用戶。

//refresh method: 
private refreshData(): void { 
    this.getPeople().subscribe(updated => { 
     this.people.next(updated); 
     this.subscribeToData(); 
    }); 
} 
//timer method: 
private subscribeToData(): void { 
    Observable.timer(5000).first().subscribe(() => this.refreshData()); 
} 

見詳細解釋一下：Realtime Refresh

你也應該被用於這種如Fireloop.io事情內置了一些框架看一看。

Answer 4

如果我理解正確，你有一個可觀察的服務來刪除，然後想通過另一個調用observable的方法來刷新。這裏的問題是可觀察的是異步的。以下代碼顯示了我是如何通過使用finally調用刷新數據來完成類似任務的。這又會在第一次異步調用結束時再次調用服務來刷新數據，這將完成。

delete(item: any) { 

    if (confirm("Are you sure you wish to delete Lease ' " + item.title + " '")) { 
     this.service.delete(item.leaseid) 
      .finally(()=> {this.getLeases();}) 
      .subscribe(
      res => { 
       this.alertService.success("Lease Has been Deleted"); 
      }, 
      err => { 
       this.handleError(err); 
      } 
      ) 

    } 
}