Arrays 在Angular 4中从JSON数组中选择对象

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

如何让第一个组件只渲染id为1的对象？第二个组件也是如此。我知道，现在在设置时，每个组件都将连接到阵列中的两个对象

在服务或每个组件中是否有这样做的方法

data.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'));
   }
}

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);
  }
}

从'@angular/core'导入{Component，OnInit}；
从“./Page”导入{Page}；
从“../../services/page.service”导入{PageService}；
@组成部分({
选择器：“第1页”，
templateUrl:'./page.component.html'，
提供者：[PageService]，
})
导出类Page1组件实现OnInit{
页码：第[]页；
错误消息：字符串；
恩戈尼尼特（）{
这是getPages（）；
}
getPages（）{
this.genreService.getPages（）
.订阅(
pages=>this.pages=pages，
error=>this.errorMessage=error）；
}
}

也许您可以更改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'));
}

getPage（id:number）：可观察{
//…使用get请求
返回this.http.get（this.pagesUrl）
//…并对响应调用.json（）以返回数据
.map（（res:Response）=>res.json（））
//…是否有其他映射返回正确的对象
.map（（数据：数组）=>{
返回data.find（x=>x.id==id）
})
//…错误（如果有）
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}

有了这个功能，它只会返回你想要的页面，

---

希望对您有所帮助。

这将对您有好处

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

{{set.name}

{{set.title}}

您的代码中存在不一致之处。在您的组件中有

this.pages

，但在html中它是

set

。这是故意的吗？

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