无法将url读取为JSON数据

时间:2018-08-29 11:49:02

标签: html json angular

我有此JSON数据,并使用angular将其输出到html文件中。我使用服务来获取JSON数据,并使用组件来创建模板。使用模板后,我仅获得id值和名称值,而没有url值。

JSON:

{
 "A":1,
 "B":[
  {
   "id":1, 
   "name":"One", 
   "url":"http://myapp/rootpath/first"
  },
  {
   "id":2, 
   "name":"two", 
   "url":"http://myapp/rootpath/second"
  }
 ]
}

我正在将JSON数据传递到组件中的postArray变量,并将其传递到html文件。

search.service.ts:

import { Injectable } from '@angular/core';
import {Http,Response} from "@angular/http";
import { Observable } from "rxjs";
import "rxjs/Rx";
import {JsoncallItem} from "./jsoncall-item";

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private postsURL ="http://myapp/items";

  constructor(private http: Http ) {}
 getPosts(): Observable<JsoncallItem[]>{
    return this.http
     .get(this.postsURL)
     .map((response: Response)=> {
       return <JsoncallItem[]>response.json();
     })
     .catch(this.handleError);
 }

 private handleError(error: Response) {
   return Observable.throw(error.statusText);
 }
}

search.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from "./../search.service";
import { JsoncallItem } from "./../jsoncall-item";
import { error } from 'util';
import { SearchtermPipe } from './../searchterm.pipe';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

    title = 'app';

    _postsArray: JsoncallItem[];

  constructor(private apiSerivce: ApiService){}

  getPosts(): void {
    this.apiSerivce.getPosts().
    subscribe(
       resultArray => this._postsArray = resultArray
       )
       //error => console.log("Error :: " + error ))
  }
  ngOnInit(): void{
    this.getPosts();
  }
}

search.component.html:

<div class="container">
    <ul>
        <li *ngFor="let post of _postsArray | searchterm: value">
            <a href="" id="allitem">{{post.id}}, {{post.name}}, {{post.url}}</a>
            <hr>
        </li>

    </ul>
</div>

输出显示每个数据的ID和名称,但不显示URL。这怎么了?

0 个答案:

没有答案