对象 - Typescript未检测到Angular 2嵌套属性

Question

我有一个从服务器获取数据的组件，服务器返回一个字符串JSON，如：

"{
  "name": "John Doe",
  "age": "5",
  "addresses": [
    {"street": "123 Street", "city": "Main City"} 
  ]
}"

所以，当我在我的组件中收到这个时，我会这样做：

let result = JSON.parse(response); //response is the JSON string from server

然后因为我需要显示我正在使用ngFor显示它的所有地址。问题是地址不显示。当我只显示地址的长度时，它显示为零。所以我试着在控制台上打印整个对象，它也没有显示地址的内容，但是如果我只打印地址：

console.log(result['addresses']) or console.log(result.addresses);

它显示的内容很奇怪。希望有人能帮助我。

Answer 1

好的，问题在于您尝试访问该地址的方式。您的地址是一个数组对象。所以你使用*ngFor来显示它。您的组件模板应如下所示。

@Component({
  selector: 'my-app',
  template: `
    <div>
      Name:{{data.name}}<br>
      <label *ngFor="let a of data.addresses">
        Street:{{a.street}}
        City:{{a.city}}
      </label>
    </div>
  `,
})

你很高兴去。这是相同的 Plunker Demo 。

以下是console.log(result.addresses)和console.log(result)的结果在Plunker中更新相同也可以验证。下面是相同的快照

希望它有助于：）

Answer 2

使用引号将对象的字符串表示形式放在字符串中时，必须转义引号，使用撇号作为字符串分隔符。

'{
 "name": "John Doe",
 "age": "5",
 "addresses": [
    {"street": "123 Street", "city": "Main City"} 
 ]
}'

这应该有用。