尝试在 Angular 客户端显示数据答案

【问题标题】：Trying to display data in the Angular client side尝试在 Angular 客户端显示数据
【发布时间】：2019-02-12 14:25:53
【问题描述】：

我在尝试获取街道名称时收到[object Object]，在客户端显示JSON 数据的最佳方式是什么。

我可以显示街道名称，但不能显示其他部分。如何检索其他元素？

//Interface 

export interface Street {
    name: string;
    color: string;
}

export interface Place {
    name: string;
    streets: Street[];
    stopLights: string[];
    similarStreets: string[];
}

// Client Side
<h2>Place List</h2>
<ul *ngFor="let place of places.places">
  <li>{{place.name}}</li>      //This works and shows the name
  <li>{{place.color}}</li>    //showing [object Object] for color

</ul>

//JSON Data 
{
  "places": [
    {
      "name": "San Jose",
      "street": [
        {
          "name": "1st Street",
          "color": "Sharkish"
        },
        {
          "name": "Santa Clara",
          "color": "49ers"
        }
     ],
  }

【问题讨论】：

标签： javascript json angular typescript interface

【解决方案1】：

使用另一个*ngFor 进行颜色

<h2>Place List</h2>
<ul *ngFor="let place of places.places">
  <li>{{place.name}}</li>
  <li *ngFor="let street of place.street">{{street.color}}</li>
</ul>

【讨论】：

更准确的正确答案应该是：对街道使用另一个 *ngFor。也应该是“让 place.street 的街道”而不是“让 place.street 的颜色”
@Alber 感谢您的建议
谢谢你，但是你能编辑你的anwser，因为它不是完全正确的

【解决方案2】：

当 Place 对象包含在 Street 对象中时，您尝试显示它的“颜色”属性。此外，Place 接口与您的 JSON 数据不匹配，因为 street 在您的界面中是复数形式，而不是在您的 JSON 数据中。

尝试像这样更正您的 JSON 数据：

//JSON Data 
{
  "places": [
    {
      "name": "San Jose",
      "streets": [
        {
          "name": "1st Street",
          "color": "Sharkish"
        },
        {
          "name": "Santa Clara",
          "color": "49ers"
        }
     ],
  }

那么你可以这样做：

<li *ngFor="let street of place.streets">{{ street.color }}</li>

访问您所在位置的每条街道的颜色。

【讨论】：

我怎样才能同时访问 "name": "1st Street", "color": "Sharkish"
{{ street.name }}, {{ street.color }}

【解决方案3】：

street 是另一个字符串数组。因此，要访问其中的对象，您需要对其使用另一个循环（*ngFor）。

【讨论】：

【解决方案4】：

谢谢大家！这很有帮助！弄脏手后，我得到了解决方案。这是另一个例子！

   <div>
            <ol>
                 <li *ngFor="let item of videoList" > 
                      <div>{{item.title}}</div> 
                      <ol>
                           <li *ngFor="let subItem of item.nodes"> 
                                <div>{{subItem.title}}</div> 
                           </li>
                      </ol>
                 </li>
            </ol>
       </div>


<h2>Place List</h2>
<ul *ngFor="let place of places.places"> 
  <li>{{place.name}}</li>      //This works and shows the name
  <div *ngFor="let myStreet of place.street"> 
     <li>{{ myStreet.name }} </li>
  </div>
</ul>

【讨论】：