Angular2 路由总是解析 returns 数组而不是单个对象

Question

我正在检索用户信息以显示个人资料页面，我使用路由解析来执行此操作，但解析方法出于某种原因将用户放入数组中。如何使解析 return 成为单个对象？

声明和提供所有服务、模块、解析和组件

型号：

/**
 * Builds a user from the provided parameters
 * @param {string} id of the user
 * @param {string} username of the user
 * @param {string} password of the user
 * @param {string} apiKey of the user
 * @param {string[]} roles of the user to give certain rights
 */
export class User {
    id: string;
    username: string;
    password: string;
    apiKey: string;
    roles: string[];

    constructor(id: string, username: string, password: string, apiKey: string, roles: string[]) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.apiKey = apiKey;
        this.roles = roles;
    }
}

服务方式：

findByApiKey(): Observable<User> {
    const headers = new Headers();
    headers.append('Accept', 'application/smartask.usersv2+json');
    headers.append('api-key', this.authenticationService.getApikey());

    const options = new RequestOptions({
        headers: headers
    });

    const url = `${this.url}?apikey=${this.authenticationService.getApikey()}`;
    return this.http.get(url, options)
        .map((response: Response) => {
            return (<any>response.json()).map(user => {
                return new User(
                    user.id,
                    user.username,
                    user.password,
                    user.apiKey,
                    user.roles
                );
            });
        }, {headers: headers});
}

解决class:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve} from '@angular/router';
import {User} from '../models/user.model';
import {UserService} from '../providers/user.service';


@Injectable()
export class UserResolve implements Resolve<User> {

    constructor(private userService: UserService) {
    }

    resolve(route: ActivatedRouteSnapshot) {
        return this.userService.findByApiKey();
    }
}

组件：

import {Component, OnInit} from '@angular/core';
import {User} from '../../models/user.model';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

    user: User;

    constructor(private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.user = this.route.snapshot.data['profile'];
        console.log('user', this.user);
    }

}

而 console.log 的结果是

Answer 1

根据评论，问题是 API 返回一个包含用户对象的数组。如果您无法更改它，您可以将 map 更改为：

return this.http.get(url, options)
    .map(response => response.json()) // this is no longer necessary in latest angular
    .map(user => user && user[0])
    .map(userData => userData && new User(
       userData.id,
       userData.username,
       userData.password,
       userData.apiKey,
       userData.roles
    ), {headers: headers});

Angular2 路由总是解析 returns 数组而不是单个对象

Angular2 route resolve always returns array instead of single object

angular

routes

angular2-routing

angular-services

resolve