角度2のモーダルにJSONデータを渡す方法

Question

角度2のモーダルをポップアップして人のリストを表示しようとしています。リストのソースはJSONファイルです。私は、データがモーダルのテーブルに正しくバインドされていないと思います。私はアンジェルス2の新人ですが、私が何が欠けているのか分かりません。 戻り-JSONアレイ-service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs'; 

@Injectable() 
export class ReturnsJsonArrayService { 

    constructor(private http: Http) {} 

    getPeople(): Observable<any> { 
    return this.http.request('./people.json') 
     .do(res => console.log('HTTP response:', res)) 
     .map(res => res.json().payload) 
     .do(console.log); 
    //.map(res => res.json()); 

    /*return this.http.get('./people.json') 
    .map((res:Response) => res.json()) 
    .catch((error:any) => Observable.throw(error.json().error || 'Server error'));*/ 
    } 

} 

サンプルJSONファイル：

{ 
    "id": "1", 
    "name": "David Martinez Ros", 
    "email": "info@davidmartinezros.com", 
    "age": "33" 
    }, 
    { 
    "id": "2", 
    "name": "Paco Roberto Corto", 
    "email": "paco.roberto.corto@gmail.com", 
    "age": "51" 
    }, 
    { 
    "id": "3", 
    "name": "Silvia Elegante i Latina", 
    "email": "silvia.elegante.latina@gmail.com", 
    "age": "30" 
    } 
] 

モーダルcomponent.ts

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

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; 
import { Observable } from 'rxjs'; 
import { ReturnsJsonArrayService } from './returns-json-array.service'; 


@Component({ 
    selector: 'ngbd-modal-content', 
    providers: [ReturnsJsonArrayService], 
    template: ` 
<div class="modal-header"> 
    <h4 class="modal-title">Hi there!</h4> 
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> 
    <span aria-hidden="true">&times;</span> 
</button> 
<div class="modal-body" *ngFor="let person of peopleData | async" > 
    <p>One fine body…</p> 
    <table border=1> 
<tr> 
<td> 
    <h3>Id: {{ person.id }}</h3> 
</td> 
<td> 
    <h3>name: {{ person.name }}</h3> 
</td> 
<td> 
    <h3>email: {{ person.email }}</h3> 
</td> 
<td> 
    <h3>age: {{ person.age }}</h3> 
</td> 
<td> 
    </tr> 
</table> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Submit</button> 
</div> 
` 
}) 
export class NgbdModalContent { 
    @Input() name; 
    @Input() peopleData: Observable<Array<any>>; 

    constructor(public activeModal: NgbActiveModal,private peopleService: ReturnsJsonArrayService) { 
    this.peopleData = this.peopleService.getPeople(); 
    console.log("AppComponent.data:" + this.peopleData); 
    } 
} 

@Component({ 
    selector: 'ngbd-modal-component', 
    templateUrl: './modal-component.html' 
}) 
export class NgbdModalComponent { 
    constructor(private modalService: NgbModal) {} 

    open() { 
    const modalRef = this.modalService.open(NgbdModalContent); 
    modalRef.componentInstance.name = 'Barb' ; 
    console.log("Peopledatra on open():" + modalRef.componentInstance.peopleData); 

    } 
} 

people.json JSONファイルを読み込むための

サービス

modal-component.html

<button class="btn btn-primary" (click)="open()">Assign</button> 

Answer 1

this.peopleService.getPeople()それをアクティブにし、それは熱いあなたが購読this.peopleService.getPeople().subscribe()購読を追加する必要があります作るために寒され、観察がそうのように最初の引数としての成功の方法を取る返しますJSONをしたら

this.peopleService.getPerople().subscribe(
    (json) => { 
    // do something here with the json 
    } 
) 

返されたコンポーネントのスコープ内のプロパティに設定することができます：

this.peopleService.getPerople().subscribe(
    (json) => { 
    this.json = json; 
    } 
) 

このプロパティはコンポーネントテンプレートでアクセスできます。