使用 Angular 从 Google 人 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

我的组件页面中的class如下：

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>

使用 Angular 从 Google 人 API 中获取姓名

Using Angular to get names from the Google People API

angularjs-directive

angular