I have encountered an issue while trying to delete a specific element from my array upon user click. Instead of removing the intended item only, it deletes all elements in the array. I attempted to use splice method on the dataService object, but I'm facing an error that says "Property 'splice' does not exist on type 'Observable< any>'". My goal is to remove just one element from the dataService based on the Object passed from the HTML. Any advice or suggestions would be highly appreciated! footer.component.ts
export class FooterComponent {
nominations = [];
constructor(private dataService: DataService) {
this.dataService.currentNoms.subscribe(noms => {this.nominations.push(noms);});
}
ngOnInit(): void{
}
remove(nom: Object): any{
this.nominations.splice(this.nominations.indexOf(nom), 1);
console.log(nom);
console.log(this.nominations);
}
}
footer.component.html
<div class="nominationsDisplay">
<div id="nominations" *ngFor="let nom of nominations[0]">
<img src={{nom.Poster}}/>
<button class="removeBtns" type="submit" (click)="remove(nom)">Remove</button>
</div>
</div>
data.service.ts
export class DataService {
private finalNoms = new BehaviorSubject<any>([]);
currentNoms = this.finalNoms.asObservable();
constructor() { }
addNominations(nom: Object){
this.finalNoms.next(nom);
}
}