Удалить элемент из DataService Angular / TypeScript

#angular #typescript #components

#angular #typescript #Компоненты

Вопрос:

Я пытаюсь удалить элемент из своего DataService и обновить все компоненты, однако у меня возникают проблемы, независимо от того, что я пытаюсь, я не могу удалить элемент из DataService и обновить основной компонент. Чего мне здесь не хватает? Нужно ли мне что-либо менять с помощью конструктора компонентов тела? Спасибо.

app.component.html

 <app-header></app-header>
<app-footer></app-footer>
<app-body></app-body>
 

нижний колонтитул.component.ts

 import { DataService } from '../data.service';
nominations = [];
constructor(private dataService: DataService) {
    this.dataService.nominations$.subscribe(noms => this.nominations.push(noms));
    this.nominations.splice(0, 1);
  }
remove(indx: number){
    //remove movie from array in footer
    this.nominations.splice(indx, 1);
    //remove movie from dataService
    this.dataService.removeNomination(indx);
  }
 

data.service.ts

 import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private nominations = new BehaviorSubject<any>([]);
  nominations$ = this.nominations.asObservable();

  constructor() { 
    this.addNominations(this.nominations);
  }

  getNominations(){
    return this.nominations;
  }

  addNominations(nom: Object){
    this.nominations.next(nom);
  }

  removeNomination(index: number){
    delete this.nominations$[index];   
  }

}
 

body.component.ts

 constructor(private http: HttpClient, private dataService: DataService) {
    this.dataService.nominations.subscribe(noms => this.nominations.push(noms));
    this.nominations.splice(0, 1);
   }
 

Ответ №1:

вам не нужны номинации $

data.service.ts

 import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  public nominations = new BehaviorSubject<any>([]);

  constructor() { 
    
  }

  setNominations(nom: Object){
    this.nominations.next(nom);
  }
}
 

нижний колонтитул.component.ts

 import { DataService } from '../data.service';
nominations = [];
constructor(private dataService: DataService) {
    this.dataService.nominations.subscribe(noms => this.nominations.push(noms));
  }
remove(indx: number){
    //remove movie from array in footer
    this.nominations.splice(indx, 1);
    //remove movie from dataService
    this.dataService.setNominations(this.nominations);
  }
 

затем каждый, где вы подписываетесь на номинации, получает объединенные номинации.

Комментарии:

1. Я пробовал это, однако у меня все еще возникает проблема с тем, что мое тело не получает обновленный список номинаций.

2. у вас есть разные экземпляры DataService?

3. существует экземпляр в моем компоненте body и в компоненте нижнего колонтитула. они создаются в конструкторах.

4. мой ответ должен сработать. можете ли вы создать демонстрационную версию stackblitz?