嘗試在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>