2016-07-04 9 views
8

से विशिष्ट तत्व दूर करने के लिए कैसे वहाँ स्थानों की सरणी के मानने योग्य है:नमूदार <Array<any>>

places: Observable<Array<any>>; 

टेम्पलेट यह async पाइप के साथ प्रयोग किया है:

<tr *ngFor="let place of places | async"> 
    ... 
</tr> 

कुछ उपयोगकर्ता क्रियाओं के बाद मुझे इस सरणी से विशिष्ट आईडी के साथ जगह को हटाने की जरूरत है। मेरे पास मेरे कोड में ऐसा कुछ है, लेकिन यह काम नहीं करता है:

deletePlace(placeId: number): void { 
    this.apiService.deletePlace(placeId) 
    .subscribe(
    (res: any) => { 
     this.places 
     .flatMap((places) => places) 
     .filter((place) => place.id != placeId); 
    }, 
    (err: any) => console.log(err) 
);  
} 

क्या आप इससे मेरी सहायता कर सकते हैं?

उत्तर

16

आप इसे इस तरह से नहीं कर सकते, क्योंकि आप नहीं "अद्यतन" एक नमूदार (यानी यह राज्यों रखना नहीं करता है) कर सकते हैं लेकिन आप इसके माध्यम से एक घटना पर प्रतिक्रिया कर सकते हैं।

आपके उपयोग के मामले के लिए, मैं एक भी एक में लाभ उठाने हैं scan ऑपरेटर और मर्ज दो धाराओं:

  • प्रारंभिक लोड हो रहा है
  • हटाने घटना के लिए एक दूसरे के लिए एक।

यहाँ एक नमूना है:

let obs = this.http.get('/data').map(res => res.json()); 

this.deleteSubject = new Subject(); 

this.mergedObs = obs.merge(this.deleteSubject) 
.startWith([]) 
.scan((acc, val) => { 
    if (val.op && val.op==='delete') { 
    var index = acc.findIndex((elt) => elt.id === val.id); 
    acc.splice(index, 1); 
    return acc; 
    } else { 
    return acc.concat(val); 
    } 
}); 

एक तत्व हटाए जाने को गति प्रदान करने के लिए बस इस विषय पर एक घटना भेजें: https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview:

this.deleteSubject.next({op:'delete', id: '1'}); 

इस plunkr देखें।

1

फ़िल्टर फ़ंक्शन अपरिवर्तनीय है और मूल सरणी नहीं बदलेगा।

मैं कुछ इस तरह के deletePlace समारोह बदल जाएगा: -

deletePlace(placeId: number): void { 
    this.apiService.deletePlace(placeId) 
    .subscribe(
    (res: any) => { 
     this.places = this.places.filter((place) => place.id != placeId); 
    }, 
    (err: any) => console.log(err) 
);  
} 
संबंधित मुद्दे