Question

我正在使用解析器从后端获取一小部分主题。我自定义了getAll（）方法以从本地服务器检索它。我在记录修改后的方法时会得到完整的数组，但是当我使用可观察的entityServiceentities $时，我只会得到数组的第一项。我究竟做错了什么？

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（）。这将返回发出的第一个值。尝试删除first（）。

为什么使用ngrx数据在解析器和组件之间修改数据？

1 个答案: