主题和可观察对象，如何删除项目，filter()列表和next() [英] Subject and Observable, how to delete item, filter() list and next()

问题描述

我有一个设置了主题"和可观察"的歌曲列表(在视图中显示为"| async")，现在我想从列表中删除歌曲，执行一些filter()并在主题"上调用next().

I have a list of songs setup with Subject and Observable (shown with | async in view), and now I want to delete a song off the list, do some filter() and call next() on the Subject.

如何以及在何处进行过滤?现在我正在对Subject进行getValue()并将其传递给Subject上的next().这似乎是错误的和循环的.

How and where do I filter? Right now I am doing getValue() on Subject and passing that to next() on, well, Subject. This just seems wrong and circularish.

我还尝试订阅主题并以这种方式获取数据，对其进行过滤并在subscribe()中调用next()，但是我遇到了RangeError.

I also tried subscribing to the Subject and getting the data that way, filtering it and calling next() inside subscribe(), but I got a RangeError.

我可以通过存储所有已删除的ID来过滤Observable.然后，主题的列表由于已在其中删除了歌曲而变得不同步，而且每个观察者都将不得不拥有看上去很可笑的Deleted-id's-list.我的年龄和精神都在迅速增长.请帮我上网:(

I could filter the Observable by storing all deleted id's. The Subject's list then becomes out of sync by having deleted songs on there and also every observer would have to have the deleted-id's-list which seems ludicrous. I'm rapidly growing old and mental. Please help me internet :(

export class ArtistComponent implements OnInit {
  private repertoire$;
  private repertoireSubject;
  constructor(
    private route: ActivatedRoute,
    private service: ArtistService
  ) {
    this.getRepertoire().subscribe(
      songs => this.repertoireSubject.next(songs)
    );
  }

  getRepertoire() {
    return this.route.paramMap
      .switchMap((params: ParamMap) =>
      this.service.fetchRepertoire(params.get('id')));
  }

  //THIS IS WHERE I'M HAVING TROUBLE
  delete(id): void {
    this.repertoireSubject.next(
      this.repertoireSubject.getValue().filter(song => (song.id !== id))
    );
    // TODO remove song from repertoire API
  }

  ngOnInit() {
    this.repertoireSubject = new BehaviorSubject<any>(null);
    this.repertoire$ = this.repertoireSubject.asObservable();
  }

}

推荐答案

我建议您在组件上创建新属性，该属性将最后存储状态. (这里了解各种歌曲).

i recommand you to create new attribute on your component, where you will last store state. (here understands array of songs).

始终最好用表示状态(或存储)的内部属性和另一个具有同步应用程序其余部分(通过可观察/事件)角色的属性来概念化代码.

Is always better conceptualize your code by, internal property who represent your state (or store) and another attribute who have the role to sync rest of your application (by observable / event).

另一个技巧是按模型强类型化您的代码.将会更容易调试和维护.

Another tips is to strong type your code by model. Will be easier to debug and maintain.

然后，您只需要根据自己的逻辑对其进行更新，然后在主题上进行更新

Then you just have to update it according to your logic and next on your Subject

export interface SongModel {
        id: number;
        title: string;
        artiste: string;
    }

    export class ArtistComponent implements OnInit {
        private repertoire$ : Observable<SongModel[]>;
        private repertoireSubject: BehaviorSubject<SongModel[]>;
        //Array of song, should be same type than repertoireSubject.
        private songs: SongModel[];

        constructor(
            private route: ActivatedRoute,
            private service: ArtistService
        ) {

            //We push all actual references.
            this.getRepertoire().subscribe(
                songs => {
                    this.songs = songs;
                    this.repertoireSubject.next(this.songs);
                }
            );
        }

        ngOnInit() {
            //Because is suject of array, you should init by empty array.
            this.repertoireSubject = new BehaviorSubject<SongModel[]>([]);
            this.repertoire$ = this.repertoireSubject.asObservable();
        }


        getRepertoire() {
            return this.route.paramMap
                .switchMap((params: ParamMap) =>
                this.service.fetchRepertoire(params.get('id')));
        }

        //THIS IS WHERE I'M HAVING TROUBLE
        delete(id: number): void {
            // Update your array referencial.
            this.songs = this.songs.filter(songs => songs.id !== id);
            // Notify rest of your application.
            this.repertoireSubject.next(this.songs);
        }
    }

这篇关于主题和可观察对象，如何删除项目，filter()列表和next()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！