【问题标题】:Remove Item From DataService Angular/TypeScript从 DataService Angular/TypeScript 中删除项目
【发布时间】:2021-01-09 00:52:23
【问题描述】:

我正在尝试从我的 dataService 中删除一个项目,并更新所有组件,但是我遇到了问题,无论我尝试什么,我都无法从 dataService 中删除该项目并更新正文组件。我在这里想念什么?我是否需要使用 body components 构造函数更改任何内容?谢谢。

app.component.html

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

footer.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);
   }

【问题讨论】:

    标签: angular typescript components


    【解决方案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);
      }
    }
    

    footer.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);
      }
    

    那么您订阅提名的每个地方都会获得拼接提名。

    【讨论】:

    • 我试过了,但是我的身体仍然没有收到更新的提名名单。
    • 你有不同的dataService实例吗?
    • 在我的正文组件和页脚组件中有一个实例。它们是在构造函数中创建的。
    • 我的答案应该有效。你能创建 stackblitz 演示吗?
    猜你喜欢
    • 2019-01-19
    • 1970-01-01
    • 2021-04-03
    • 2021-10-05
    • 1970-01-01
    • 1970-01-01
    • 2017-06-10
    • 2018-01-18
    • 2021-10-23
    相关资源
    最近更新 更多