Почему данные изменяются между преобразователем и компонентом с данными ngrx?

Question

Я получаю небольшой набор тем из серверной части, используя преобразователь. Я настроил метод getAll() для получения его с моего локального сервера. Я получаю полный массив в модифицированном методе, когда регистрирую его, но когда я использую entityService entity $ observable, я получаю только первый элемент массива. Что я делаю неправильно?

import { Component, OnInit } from '@angular/core';
import { Topic } from 'src/app/models/topic.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { GroupService } from 'src/app/services/group.service';
import { Observable } from 'rxjs';
import { TopicEntityService } from './ngrx/topic-entity.service';
import { map } from 'rxjs/operators';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
    form: FormGroup;
    username: string;
    topics$: Observable<Topic[]>;

    constructor(private groupService: GroupService, private topicService: TopicEntityService) { }

    ngOnInit() {
        this.form = new FormGroup({
            'topic': new FormControl('', { validators: [Validators.required] })
        });
        this.topics$ = this.topicService
            .entities$
            .pipe(
                map(topics => {
                    console.log(topics);
                    return topics;
                })
            );
    }

Модифицированный метод dataService:

import { Injectable } from '@angular/core';
import { DefaultDataService, HttpUrlGenerator } from '@ngrx/data';
import { Topic } from 'src/app/models/topic.model';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class TopicsDataService extends DefaultDataService<Topic> {

    constructor(http: HttpClient, httpUrl: HttpUrlGenerator) {
        super('Topic', http, httpUrl);
    }
    getAll(): Observable<any> {
        return this.http.get('http://localhost:3000/api/topics')
            .pipe(
                map(res => {
                    console.log(res);
                    return res;
                })
            );
    }
}

Резольвер:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { TopicEntityService } from './topic-entity.service';
import { Observable } from 'rxjs';
import { tap, filter, first } from 'rxjs/operators';


@Injectable()
export class HomeResolver implements Resolve<boolean> {

    constructor(private topicService: TopicEntityService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

        return this.topicService.loaded$
            .pipe(
                tap(loaded => {
                    if (!loaded) {
                        this.topicService.getAll();
                    }
                }),
                filter(loaded => !!loaded),
                first()
            );
    }
}

Я изменил массив в бэкэнде, и теперь он работает как задумано. Я все еще хотел бы знать, что было не так раньше. Я предполагаю, что данные ngrx ожидают определенного формата для данных, которые они получают?

Предыдущий массив в бэкэнде:

exports.getTopics = (req, res) => {
    try {
        const topics = [{
                name: 'Politics',
                info: 'Keep up with the latest news'
            },
            {
                name: 'Arts',
                info: 'Music, Litterature, Cinema...'
            },
            {
                name: 'Sports',
                info: 'Will there ever be another Bergkamp?'
            },
            {
                name: 'Health',
                info: 'What is going on inside you?'
            },
            {
                name: 'Crafts',
                info: 'If you make things with your hands'
            },
            {
                name: 'Home',
                info: 'Tips and tricks to improve your home'
            },
            {
                name: 'Travel',
                info: 'Where next?'
            }
        ];
        res.status(200).send(topics);

    } catch (error) {
        res.status(500).send(error);
    }

};

Измененный массив в бэкэнде:

exports.getTopics = (req, res) => {
    try {
        const topics = {
            1: {
                id: 1,
                name: 'Politics',
                info: 'Keep up with the latest news'
            },
            2: {
                id: 2,
                name: 'Arts',
                info: 'Music, Litterature, Cinema...'
            },
            3: {
                id: 3,
                name: 'Sports',
                info: 'Will there ever be another Bergkamp?'
            },
            4: {
                id: 4,
                name: 'Health',
                info: 'What is going on inside you?'
            },
            5: {
                id: 5,
                name: 'Crafts',
                info: 'If you make things with your hands'
            },
            6: {
                id: 6,
                name: 'Home',
                info: 'Tips and tricks to improve your home'
            },
            7: {
                id: 7,
                name: 'Travel',
                info: 'Where next?'
            }
        };
        res.status(200).send(Object.values(topics));

    } catch (error) {
        res.status(500).send(error);
    }

};

Answer 1

В вашем преобразователе вы используете first() в конвейере. Что вернет первое испущенное значение. Попробуйте сначала удалить это ().