角2の配列はidで特定のデータを抽出します

Question

idで配列から特定のデータを抽出してdivで使用するにはどうすればよいですか？

home.component.tsは、これは私のhtmlコードであるイムID home.component.html

でプロジェクトの名前、タイトル、およびステータスを取得しようとしていた

import { Component } from '@angular/core'; 
import { HomeProjectComponent } from './home-project.component'; 
import { NewsletterComponent } from './../shared/newsletter/newsletter.component'; 

export class Project { 
    id: number; 
    name: string; 
    title: string; 
    status: string; 
} 

const PROJECTS: Project[] = [ 
    { id: 1, 
    name: 'name1', 
    title: 'title1', 
    status: 'status1' 
    }, 
    { id: 2, 
    name: 'name2', 
    title: 'title2', 
    status: 'status2' 
    }, 
    { id: 3, 
    name: 'name3', 
    title: 'title3', 
    status: 'status3' 
    }, 
.... 
{ id: 100, 
    name: 'name100', 
    title: 'title100', 
    status: 'status100' 
    }, 
]; 


@Component({ 
    selector: 'home', 
    templateUrl: './app/home/home.component.html', 
    styleUrls: ['./app/home/home.component.css'], 
    directives: [HomeProjectComponent, NewsletterComponent] 
}) 

export class HomeComponent { 
    projects = PROJECTS; 
} 

---

を提出します

{{project.name}}、{{project.title}}と{{project.status}}は同じ

get data with id 20 
<home> 
    <h1>{{project.name}}</h1> 
    <h2>{{project.title}}</h2> 
    <p>{{project.status}}</p> 
</home> 

// SOME HTML 

get data with id 64 
<home> 
    <h1>{{project.name}}</h1> 
    <h2>{{project.title}}</h2> 
    <p>{{project.status}}</p> 
</home> 

// SOME HTML 

get data with id 69 
<home> 
    <h1>{{project.name}}</h1> 
    <h2>{{project.title}}</h2> 
    <p>{{project.status}}</p> 
</home> 

Answer 1

でなければなりません

@Component({ 
    selector: 'home', 
    templateUrl: './app/home/home.component.html', 
    styleUrls: ['./app/home/home.component.css'], 
    directives: [HomeProjectComponent, NewsletterComponent] 
}) 

export class HomeComponent { 
    projects = PROJECTS; 

    projectId2 = this.extractProjectWithId(2); 

    extractProjectWithId(id){ 
     let i; 
     for(i = 0; i< this.projects.length; i++) 
     { 
     if(this.projects[i].id === id) 
      return this.projects[i]; 
     } 

     return null; 
    } 
} 

---

<div *ngIf="projectId2"> // extract data with ID 2 from project 
    <h1>{{projectId2.name}}</h1> 
    <h2>{{projectId2.title}}</h2> 
    <p>{{projectId2.status}}</p> 
</div> 

Answer 2

私は何かのように、ID 2を持つオブジェクトを返すメソッドを記述します。

：

getObjectById(id: number) { 
    return PROJECTS.filter(x => x.id == id); 
} 

が

<home> // extract data with ID 2 from project 
    <h1>{{ getObjectById(2)[0].name }}</h1> 
    <h2>{{ getObjectById(2)[0].title }}</h2> 
    <p>{{ getObjectById(2)[0].status }}</p> 
</home> 

それを読んで、新たな編集の更新

あなたが*ngForを使用してそれらを印刷しない理由配列からすべてproject必要があるので：

<home *ngFor="let project of PROJECTS"> // extract data with ID 2 from project 
    <h1>{{ project.name }}</h1> 
    <h2>{{ project.title }}</h2> 
    <p>{{ project.status }}</p> 
</home> 

補間{{ }}を簡素化し、あなたが特定の要素を取得するために、任意の他の機能を必要としないことを。あなたはその後、

projectInSequence: Project[]; 

をメンバ変数を作成して、所望の順序でプロジェクトをプッシュし、projectsの順序を気にしている場合 は、ngForは*ngFor="let project of projectInSequenceに変更されます。塗りつぶしprojectInSequenceはライフサイクルフックで行うことができますhttps://angular.io/docs/ts/latest/guide/lifecycle-hooks.html