从Angular 4中的JSON数组中选择对象答案

【问题标题】：Selecting object from JSON array in Angular 4从Angular 4中的JSON数组中选择对象
【发布时间】：2017-05-25 23:42:56
【问题描述】：

使用具有 2 个组件/页面的 angular4 应用程序。第一个组件与对象 id:1 相关，它是一个页面，第二个组件与 id:2 相关，它是另一个页面。这两个页面共享相同的模板“page.component.html”

如何让第一个组件只渲染 id:1 的对象？第二个组件也是如此。我知道现在在设置时，每个组件都将访问数组中的两个对象。

有没有办法在服务或每个组件中做到这一点？

数据.json

[
  {
    "id": 1,
    "array":
    [
      {
        "name": "name1.a",
        "title": "title1.a",
      },
      {
        "name": "name1.b",
        "title": "title1.b",
      },
      {
        "name": "name1.c",
        "title": "title1.c",
      }
    ],
  }
  {
    "id": 2,
    "array":
    [
      {
        "name": "name2",
        "title": "title2",
      }
    ]
  }
]

page.component.html

<div *ngFor="let set of sets">
  <p>{{set.name}}</p>
  <p>{{set.title}}</p>
</div>

page.component.ts

// Imports
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { page }  from '../page';
import { Observable } from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class GenreService {
  // Resolve HTTP using the constructor
  constructor (private http: Http) {} 
  private pagesUrl = '../assets/json/data.json';

   // Fetch all existing comments
   getPages() : Observable<Page[]>{
       // ...using get request
       return this.http.get(this.pagesUrl)
                      // ...and calling .json() on the response to return data
                       .map((res:Response) => res.json())
                       //...errors if any
                       .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
   }
}

page.ts

export class Page {
  constructor(
    public id: number,
    public array: array,
    public name: string,
    public title: string
  ){}  
}

page.component.ts

import { Component, OnInit } from '@angular/core';

import { Page } from './page';
import { PageService } from '../../services/page.service';

@Component({
  selector: 'page1',
  templateUrl: './page.component.html',
  providers: [ PageService ],
})
export class Page1Component implements OnInit {

  pages: Page[];
  errorMessage: string;


  ngOnInit() {
    this.getPages();
  }
  getPages() {
    this.genreService.getPages()
                    .subscribe(
                       pages => this.pages = pages,
                       error => this.errorMessage = <any>error);
  }
}

【问题讨论】：

您的代码有不一致的地方。在你的组件中你有this.pages，但在你的html中它是sets。是故意的吗？

标签： arrays json angular httprequest

【解决方案1】：

这对你很有用

<div *ngFor="let set of sets.array">
  <p>{{set.name}}</p>
  <p>{{set.title}}</p>
</div>

【讨论】：

【解决方案2】：

也许您可以更改 getPage(id: number) 的方法 getPages() 并按 id 过滤。应该是这样的：

getPage(id: number) : Observable<Page>{
   // ...using get request
   return this.http.get(this.pagesUrl)
                  // ...and calling .json() on the response to return data
                   .map((res:Response) => res.json())
                   // ... do antoher map an return the correct object
                   .map((data: Array<any>) => {
                     return data.find(x => x.id === id)
                   })
                   //...errors if any
                   .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

使用该功能，它只会返回您想要的页面，希望对您有所帮助。

【讨论】：