Question

注意：我对此非常陌生并试图了解某些方面，所以任何帮助都将非常感谢！：）

摘要

我有一个项目列表（/ projects）
当我点击某个项目时，它导航到项目摘要，其中URL更改为包含项目ID（projects / 5）
在此页面上，我有一个按钮，可以查看与此项目相关的所有问题（/ projects / 5 / issues）
项目正在读取一个JSON文件，问题是从另一个JSON文件读取
项目显示正常，项目摘要显示正常，问题页面没有
加载问题页面时，它会正确导航到（/ projects / 5 / issues）
但是，此处显示JSON文件中的所有问题，而不是与项目ID＃5关联的问题。
我认为这肯定是由于我提取数据而不是过滤数据的方式。

问题

点击项目，然后显示项目摘要页面，然后点击“查看问题”。按钮，我如何只显示与该项目ID匹配的问题？

我的问题服务

＆＃13;

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { IIssues } from './issues.interface';

@Injectable()
export class IssuesService {

    private _issuesURL = 'assets/issues-list.json';

    constructor(private _http: Http) { }

    getIssues(): Observable<IIssues[]> {
        return this._http.get(this._issuesURL)
            .map((response: Response) => <IIssues[]> response.json())
            .do(data => console.log('All: ' +  JSON.stringify(data)))
            .catch(this.handleError);
    }

    getIssue(id: number): Observable<IIssues> {
        return this.getIssues()
            .map((issues: IIssues[]) => issues.find(p => p.projectId === id));
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

＆＃13;

问题组件TS

＆＃13;

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { Subscription }       from 'rxjs/Subscription';

import { IIssues } from './issues.interface';
import { IssuesService } from './issues.service';


@Component({
    moduleId: module.id,
    templateUrl: 'issues-list.component.html',
})
export class IssuesListComponent implements OnInit, OnDestroy {
    pageTitle: string = 'Issues List';
    issues: IIssues;
    errorMessage: string;
    private sub: Subscription;

    constructor(private _route: ActivatedRoute,
                private _router: Router,
                private _issuesService: IssuesService) {
    }

    ngOnInit(): void {
        this.sub = this._route.params.subscribe(
            params => {
                let projectId = +params['id'];
                this.getIssue(projectId);
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }

    getIssue(id: number) {
        this._issuesService.getIssue(id).subscribe(
            issues => this.issues = issues,
            error => this.errorMessage = <any>error);
    }
}

＆＃13;

我的问题JSON文件 我认为包含projectID在这里是必不可少的，只是不完全确定如何使用它。

＆＃13;

[
    {
        "projectId": 1,
        "projectName": "Project X",
        "issueId": 11,
        "issueName": "Project X Issue"
      }
          {
        "projectId": 1,
        "projectName": "Project X",
        "issueId": 12,
        "issueName": "Project X-X Issue"
      }
]

＆＃13;

项目摘要组件页面上的我的链接

＆＃13;

<a [routerLink]="['/projects', projects.projectId, 'issues']"> View Issues </a>

＆＃13;

问题组件HTML

＆＃13;

<h2> {{ pageTitle }} </h2>

<ul *ngIf='issues'>
    <li *ngFor='let issue of issues'>
        <ul>
            <li> <strong> Issue ID: </strong> {{ issue.issueId }} </li>
            <li> <strong> Project ID: </strong> {{ issue.projectId }} </li>
            <li> <strong> Issue Name: </strong> {{ issue.issueName }} </li>
            <li> <strong> Project ID: </strong> {{ issue.projectName }} </li>
        </ul>
    </li>
</ul>

＆＃13;

Answer 1

通过调用所有id参数＆＃34; id＆＃34; ......我认为他们可能在某处感到困惑。我建议您首先命名所有期望项目ID为projectId的参数和期望issueId为issueId的参数。

查看您的服务，看起来getIssue期待一个projectId。但是，看起来问题组件是将问题传递给了问题？

Angular嵌套路由和获取数据

1 个答案: