javascript - 如何将数据从 API 加载到 Angular 2 中的数组中？

Question

所以上周我开始学习 AngularJS，结果发现我最好还是学习 Angular 2。经过大量阅读和修改 Plunker 上的示例应用程序后，我终于准备好深入研究 Angular 2。上周，我使用 AngularJS 创建了一个简单的应用程序，它从 API 检索数据并将其转换为导航菜单。因此，本周我尝试将该代码移植到 Angular 2。

我不能说这很容易，但经过多次摆弄后，我发现它不起作用的原因是它甚至没有提取数据。下面是我提取数据的服务的代码。

./src/app/navigation.service.ts

import { NavItem } from './navigation.model';
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class NavService {   
    sections: NavItem[] = [];
    categories: NavItem[] = [];

    constructor(private http: Http) {
    }
    loadSections() {
        //var headers = new Headers();
        //headers.append('Content-Type', 'application/json');
        this.http
            .get('http://localhost:15557/api/navigation/sections/list')
            .map(res => {
                return res.json()
            })
            .subscribe(
            data => {
                this.sections = data;
            },
            err => this.logError(err),
            () => console.log("Loaded all sections")
        );
    }

    loadCategories(id) {
        this.http
            .get('http://localhost:15557/api/navigation/categories/' + id)
            .map(res => res.json())
            .subscribe(
            data => this.categories = [data],
            err => this.logError(err),
            () => console.log("Loaded categories in section with id " + id)
        );
    }

    logError(err) {
        console.error('There was an error: ' + err);
    }
}

./src/app/navigation.model.ts

export class NavItem {
    // I am never going to use int unless I need to do math operations //
    id: string;
    name: string;
    pid: string;
    slug: string;

    constructor(id: string, name: string, pid: string, slug: string) {
        this.id = id;
        this.name = name;
        this.pid = pid;
        this.slug = slug;
    }
}

./src/app/navigation.component.ts

import { Component } from '@angular/core';
import { NavItem } from './navigation.model';
import { NavService } from './navigation.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})

export class NavComponent {
    public section: NavItem;
    constructor(private service: NavService) { }
    ngOnInit() {
        this.service.loadSections();
    }
}

这段代码我做错了什么？

Answer 1

我以前从未使用过这样的服务。也许您的实现有一个简单的错误，但这是我总是以 Angular 实现服务的方式。 :)

服务

getSomething() {
    return this.http.get('your-api-url').map(res => {
       return res.json()
    });
}

组件

makeRequest() {
    this.service.getSomething().subscribe(data => {
        this.variable = data;
    }, err => {
        console.log("error :/");
    });
}