Question

我试图在角度2中弹出一个模态，显示一个人的列表。列表的来源是JSON文件。我认为数据没有正确绑定到模态中的表。我是角度2的新手，我不确定我错过了什么。

读取JSON文件的服务：返回-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'));*/
  }

}

SAmple json文件：people.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);

  }
}

模态-component.html

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

Answer 1

this.peopleService.getPeople()返回一个冷却的observable以激活它并使其变热你必须添加一个订阅this.peopleService.getPeople().subscribe()订阅将成功方法作为第一个参数，如下所示：

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

返回json后，您可以将其设置为组件范围内的属性，如下所示：

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

然后可以在组件模板中访问该属性。

如何将JSON数据传递给角度为2

1 个答案: