Попытка отобразить данные на стороне клиента 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

Спасибо всем! это было очень полезно! После грязных рук я получил решение. Вот еще один пример!

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

Answer 2

улица - это еще один массив строк.Итак, чтобы получить доступ к объекту внутри него, вам нужно использовать другой цикл (* ngFor) для него.

Answer 3

Вы пытаетесь отобразить атрибут «color» объекта 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 4

используйте другой *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>