Angular5 - 谷歌联系人api集成 - 组件中的值已更改但未反映在HTML中

Question

我已经成功地在网站中集成了谷歌联系人。但问题是，即使将联系人分配给组件变量，联系人也不会在html中列出。即。

点击谷歌按钮后，它会打开一个新窗口并在验证后关闭。我们使用令牌获取联系人并正确获取，但是在我们进行点击或按键操作之前，html部分没有反映出来。

component.ts

import { Component, OnInit, TemplateRef, Input, ViewChild } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Router } from '@angular/router';
import { AbstractControl, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { UserService } from '../../services/user-service';

@Component({
  selector: 'app-slide-panel',
  templateUrl: './slide-panel.component.html',
  styleUrls: ['./slide-panel.component.css']
})
export class SlidePanelComponent implements OnInit {
googleContacts = [];
constructor(private modalService: BsModalService, 
        private router: Router,
        private formBuilder: FormBuilder, private userService: UserService) {
  }
onGettingGoogleContacts(gcontacts: any) {
this.googleContacts = gcontacts;
}
}

component.html

 <google-signin (gotGoogleContacts)="onGettingGoogleContacts($event)"></google-signin>
<div class="select-from-list" *ngIf="googleContacts.length > 0">
    <ul>
        <li class="clearfix" *ngFor="let contact of googleContacts">
            <div class="checkboxnew">
                <input type="checkbox" class="checkbox"><i></i>
                <h5>{{contact.firstName}} {{contact.lastName}}<span>{{contact.email}}</span></h5>
            </div>
        </li>
    </ul>
    <div class="text-right">
        <button class="btn btn-lg btn-link" (click)="formType = 'inviteColleague'">Cancel</button>
        <button class="btn btn-lg btn-primary">Import</button>
    </div>
</div>

儿童component.ts

import { Component, OnInit, ElementRef, AfterViewInit, EventEmitter, Input, Output  } from '@angular/core';
import { UserService } from '../../services/user-service';
import { environment } from '../../environments/environment';

declare const gapi: any;

@Component({
  selector: 'google-signin',
  templateUrl: './google-signin.component.html',
  styleUrls: ['./google-signin.component.css']
})
export class GoogleSigninComponent implements AfterViewInit {
    @Output() gotGoogleContacts = new EventEmitter<boolean>();

    private clientId:string = environment.google_contacts_client_id;
    private scope = [
        'https://www.googleapis.com/auth/contacts.readonly',
    ].join(' ');

  constructor(private element: ElementRef, private userService: UserService) {

  }

  ngOnInit() {
  }

  public auth2: any;

  /**
   * Inialize google signin config
   */
  public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: this.clientId,
        cookiepolicy: 'single_host_origin',
        scope: this.scope
      });
      this.attachSignin(this.element.nativeElement.firstChild);
    });
  }

  /**
   * Attach signin process and get the google contacts
   * @param Object  element
   */
  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
       (googleUser) => {
        this.userService.getGoogleContactsData(googleUser.getAuthResponse().access_token)
        .subscribe((data) => {
            if (data) {
                this.passGoogleContacts(data.feed.entry || []);
            }
        });
      }, (error, data) => {
            this.passGoogleContacts([]);
      });
  }

  ngAfterViewInit() {
    this.googleInit();
  }

  /**
   * Pass google contacts to the parent
   */
  passGoogleContacts(contacts: any) {
    this.gotGoogleContacts.emit(contacts);
  }

}

用户服务

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { environment } from '../environments/environment';
import { Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { Http, ResponseContentType } from '@angular/http';

@Injectable()
export class UserService {

    constructor(
        public _http: HttpService) { }


    getGoogleContactsData(token) {
        return this._http.request(endUserApi.googleContactsApiUrl + `&access_token=${token}`)
            .map(res => res.json());
    }
}

我在此代码中，当联系人获取时，从子组件调用onGettingGoogleContacts（）函数。

我用这个mechanism来获取联系方式。

任何自动反映html中这些变化的解决方案？

Answer 1

您似乎正在使用API​​更新某个对象而不更改对象本身。你能展示使用你的api集成吗？你喜欢使用rxjs或smoething吗？还是一个简单的回调/承诺？

如果是这样，也许尝试类似的东西

onGettingGoogleContacts(gcontacts: any) {
   this.googleContacts = ...gcontacts;
}

这将创建您的数据的克隆，从而激发反射