我有一個呼叫 Observable 服務的方法。我在導航時訂閱并銷毀它，但是當我導航回我的方法堆疊時結果
注意：Angular CLI：版本 13.0.2 | npm 8.1.0
//home component
public workList:workModel[] = [];
serviceSubscription:Subscription;
constructor(
public workService: WorkServices
) {
this.serviceSubscription = this.getWorkList();
}
ngOnInit(): void {
//this.serviceSubscription = this.getWorkList();
}
ngOnDestroy(): void {
this.serviceSubscription.unsubscribe();
}
getWorkList(){
this.workList = [];
return this.workService.getWorks().subscribe((resp:Array<workModel>) => {
this.workList = resp.reverse();
console.log("work list ->", this.workList);
})
}
//**************************************************************
//service
@Injectable({
providedIn: 'root'
})
export class WorkServices {
private URL = "http://localhost:3000/work";
private works:workModel[];
constructor(
public http:HttpClient
){
this.works = new Array<workModel>();
}
getWorks(){
return this.http.get(this.URL).pipe(map((resp:any) => {
resp.forEach((w:workModel) => {
this.works.push(new workModel(
w.description,
w.client,
w.employees,
w.materials,
w.isFinished,
w.cost,
w.id
))
})
return this.works;
}));
}
/*
Console
work list -> Array [ {…}, {…} ] // load page
work list -> Array(4) [ {…}, {…}, {…}, {…} ] // Navigate and back first time
work list -> Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ] // Navigate and back second time
*/uj5u.com熱心網友回復：
顯然，結果快取在您的服務中，在works陣列中。如果不需要這種行為，那么您可以簡單地works從服務中洗掉該屬性并從getWorks方法中洗掉它的使用：
getWorks() {
return this.http.get(this.URL).pipe(
map((resp: any) => resp.map((w: workModel) =>
new workModel(
w.description,
w.client,
w.employees,
w.materials,
w.isFinished,
w.cost,
w.id
))
)
);
}
uj5u.com熱心網友回復：
我沒有看到你破壞了 observable，works 陣列正在服務中，并且服務沒有被破壞。所以它保留了資料。有三種方法可以解決這個問題
組件銷毀時清除作品陣列。
在組件的提供者陣列中包含服務，以便服務實體隨組件一起銷毀。
@Component({providers:[WorkServices]})每次呼叫 getWorks 時重新初始化作品陣列。
解決方案完全取決于您的用例。理想情況下，在您遇到特定情況之前，不應在服務中管理作業陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/470963.html
上一篇：來自ngrx的異步資料