在Angular2中使用点访问JSON字段

作为angular2的新手，我想知道如何访问带有点的JSON字段。在Angular2中使用点访问JSON字段

JSON文件

[ 
    { 
     "s.no":0, 
     "amt.pledged":15823, 
     "blurb":"'Catalysts, Explorers & Secret Keepers: Women of Science Fiction' is a take-home exhibit & anthology by the Museum of Science Fiction.", 
     "by":"Museum of Science Fiction", 
     "country":"US", 
     "currency":"usd", 
     "end.time":"2016-11-01T23:59:00-04:00", 
     "location":"Washington, DC", 
     "percentage.funded":186, 
     "num.backers":"219382", 
     "state":"DC", 
     "title":"Catalysts, Explorers & Secret Keepers: Women of SF", 
     "type":"Town", 
     "url":"/projects/1608905146/catalysts-explorers-and-secret-keepers-women-of-sf?ref=discovery" 
    }, 
    { 
     "s.no":1, 
     "amt.pledged":6859, 
     "blurb":"A unique handmade picture book for kids & art lovers about a nervous monster who finds his courage with the help of a brave little girl", 
     "by":"Tyrone Wells & Broken Eagle, LLC", 
     "country":"US", 
     "currency":"usd", 
     "end.time":"2016-11-25T01:13:33-05:00", 
     "location":"Portland, OR", 
     "percentage.funded":8, 
     "num.backers":"154926", 
     "state":"OR", 
     "title":"The Whatamagump (a hand-crafted story picture book)", 
     "type":"Town", 
     "url":"/projects/thewhatamagump/the-whatamagump-a-hand-crafted-story-picture-book?ref=discovery" 
    }]

user.component.ts

import { Component } from '@angular/core'; 
import {PostsService} from '../services/posts.service'; 



@Component({ 
    moduleId:module.id, 
    selector: 'user', 
    templateUrl:'user.component.html', 

    providers:[PostsService] 

}) 
export class UserComponent { 

    posts:Post[]; 


    constructor(private postsService: PostsService){ 


    this.postsService.getPosts().subscribe(posts => { 
     this.posts=posts; 
      }); 
    } 



    } 


interface Post{ 

     title:string; 
     by:string; 
     blurb:string; 
     location:string; 
     state:string; 
     country:string; 
     currency:string;  
     type:string; 
     url:string; 


}

当我尝试在接口柱above.I添加amt.pledged:number;我得到的错误为 “未使用标签”。我不能上网在我的HTML文件中带有点（。）的字段。

user.component.html

<div class="container"> 


    <h3>Projects</h3> 
    <div *ngFor="let post of posts" class="col-sm-4 a"> 
     <h3><a href="{{post.url}}" target="_blank">{{post.title}}</a></h3> 
     <p>By {{post.by}}</p> 
     <p>{{post.blurb}}</p> 

     <p>{{post.location}}</p> 

     <button class="btn btn-success"><a href="/about" class="b">Know more!</a></button> 

    </div> 


    </div>

谢谢！

来源

2017-04-03 Soundharya AM

您可以使用括号标记声明一个变量以点这样

interface Post{ title:string; "amt.pledged": string; }

。 'myJSON ['amt.pledged']' – echonax

可以以访问HTML文件中的属性，您可以用括号标记

object['amt.pledged']

来源

2017-04-03 09:02:12 Priyamal

嗨，尝试你的方法，但得到错误为未处理的承诺拒绝：模板解析错误：解析器错误：意外的标记[，{[{post ['amt.pledged']}}] in ng：///app/components/[email protected]：5（“

as as tried as {{在我的html文件中输入。''amt.pledged']}} –

@Soundharya它应该是'{{post ['amt.pledged']}}' – echonax

谢谢@ echonax.It现在可以使用。 –

在Angular2中使用点访问JSON字段

回答

相关问题