Использование Angular для получения имен из Google People API

Question

Я не хочу просить о помощи по такой простой проблеме, но я занимаюсь этим часами и не могу понять.

Функция на моей странице обслуживания:

  async getPeople() {
    const mypeople = await gapi.client.people.people.connections.list({
      resourceName: 'people/me',
      personFields: 'names,emailAddresses',
    })
    this.peopleItems = mypeople.result.connections;
    console.log(this.peopleItems);    
  }

Дата, возвращаемая на консоль, выглядит следующим образом:

0:
  emailAddresses: [{…}]
    etag: "%EgcBAj0JPjcuGgwBAgMEBQYHCAkKCwwiDGdncXcxTC9iTTJZPQ=="
  names: Array(1)
   0:
      displayName: "Mr. Russo"
      displayNameLastFirst: "Russo, Mr."
      familyName: "Russo"
      honorificPrefix: "Mr."
    metadata: {primary: true, source: {…}}
    __proto__: Object
    length: 1
    __proto__: Array(0)
    resourceName: "people/c7626061877818240014"
 __proto__: Object

Класс на странице моего компонента выглядит следующим образом:

export class PeopleComponent implements OnInit {
  constructor(public auth: AuthService) { }
  ngOnInit() {
  }
}

Моя проблема в том, что я не могу отобразитьимена контактов на html-странице компонента со следующим примером.

<div *ngFor="let item of auth.peopleItems">
    <h3>{{ item.names }}</h3>
</div>

Но мой браузер отображает:

[object Object]
[object Object]
[object Object]

Answer 1

Вам нужен другой вложенный ngFor порядок для доступа к displayName и т. Д., Так как item.names - это массив,

<div *ngFor="let item of auth.peopleItems">
  <div *ngFor="let itemObj of item.names">
    <h3>{{itemObj.displayName}}</h3>
  </dvi>
</div>