Angular5 - интеграция API контактов Google - значения изменяются в компоненте, но не отражаются в HTML - PullRequest
Новая
       7

Angular5 - интеграция API контактов Google - значения изменяются в компоненте, но не отражаются в HTML

0 голосов
/ 27 февраля 2019

Я успешно интегрировал контакты 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);
  }

}

user-service 

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 () вызывается из дочернего компонента при получении контактов.

Я использовал этот механизм для получения контактов.

Есть ли решение для автоматического отражения этих изменений в html?

1 Ответ

0 голосов
/ 27 февраля 2019

Похоже, вы используете API для обновления какого-либо объекта без изменения самого объекта.Можете ли вы показать использовать вашу интеграцию API?ты используешь rxjs или сглаживаешь?Или простой обратный вызов / обещание?

Если так, возможно, попробуйте что-то подобное 

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

, это создаст клон ваших данных и, таким образом, вызовет отражение

...