Question

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

点击google按钮时，它将打开一个新窗口，并在身份验证后关闭。我们正在使用令牌来获取联系人并获取了正确的信息，但是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>

child-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还是这样的平滑处理？还是简单的回调/承诺？

如果是这样，也许尝试类似的事情

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

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

Angular5-Google Contacts api集成-组件中的值已更改，但HTML中未反映

1 个答案: