尝试在Angular客户端中显示数据

Question

我在尝试获取街道名称时得到了[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"
        }
     ],
  }

Answer 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>

Answer 2

您尝试显示Place对象包含在Street对象中时的“颜色”属性。 此外，Place界面与您的JSON数据不匹配，因为街道在您的界面中是复数形式，而在您的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>

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

Answer 3

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

Answer 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>