Javascript 正在尝试在客户端显示数据

当我试图获取街道名称时，我得到的是

[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"
        }
     ],
  }

//接口
出口接口街{
名称：字符串；
颜色：字符串；
}
导出接口位置{
名称：字符串；
街道:街道[];；
红绿灯：字符串[]；
相似树：字符串[]；
}
//客户端
位置列表

{{place.name}
//这可以工作并显示名称
{{place.color}
//显示颜色的[object]

//JSON数据
{
“地点”：[
{
“名称”：“圣何塞”，
“街道”：[
{
“名称”：“第一街”，
“颜色”：“Sharkish”
},
{
“姓名”：“圣克拉拉”，
“颜色”：“49人”
}
],
}

使用另一个

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

位置列表

{{place.name}
{{street.color}

使用另一个

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

位置列表

{{place.name}
{{street.color}

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

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

您尝试显示“颜色”属性。此外，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>

{{street.color}

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

您尝试显示街道对象中包含的位置对象的“颜色”属性。此外，位置接口与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>

{{street.color}

---

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

谢谢大家！这非常有用！弄脏手后，我得到了解决方案。 这里是另一个例子

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

{{item.title}

{{subItem.title}


位置列表

{{place.name}
//这可以工作并显示名称
{{myStreet.name}

谢谢大家！非常有用！弄脏手后，我得到了解决方案。 这里是另一个例子

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

{{item.title}

{{subItem.title}


位置列表

{{place.name}
//这可以工作并显示名称
{{myStreet.name}

更精确的正确答案应该是：用另一个*ngFor street。也可以用“let street of place.street”代替“let street of place.streets”@尽管谢谢你的建议谢谢，但是你能编辑你的anwser吗，因为它不是完全正确的anwser更精确的正确anwser应该是：使用另一个*ngFor for street。另外，代替“让地方的颜色。街道”应该是“让地方的街道。街道”@虽然谢谢你的建议谢谢，但是你能编辑你的anwser吗，因为它不是完全正确的。我怎样才能同时访问两个“名称”：“第一街”，“颜色”：“Sharkish”{{Street.name}，{{{Street.color}}，我怎样才能访问两个“名称”：“第一街”，“颜色”：“Sharkish”{{Street.name}，{{Street.color}