angular2绑定不适用于google oauth2 promise

一切正常，但我无法更新视图

我希望ngOnInit（）中的订阅在每次数据流下来时都会更新视图

但是，当数据流向下传输时，代码this.user=user不会更新视图：(

我的组件代码是

import {Component, OnInit} from '@angular/core';
import {Subject, Observable} from 'rxjs/Rx';
import {AuthService} from '../../../services/auth.service';
import 'rxjs/add/operator/catch';
declare let auth2:any;

@Component({
  selector: 'user',
  templateUrl: 'build/routes/app/user/user.component.html',
  styleUrls: ['build/routes/app/user/user.component.css'],
  providers: [AuthService]
})

export class UserComponent implements OnInit {

  private userSubject = new Subject<string>();
  public user:any;

  public userStream:Observable<any> = this.userSubject.asObservable().flatMap((code:any) => {
    let restStream = this.authService.signIn(code)
      .map((response:any) => {
        return JSON.parse(response._body);
      }).catch((err:any) => {
        return Observable.throw(err);
      });
    return restStream;
  }).publish().refCount();

  constructor(public authService:AuthService) {
  }

  ngOnInit() {
    this.userStream.subscribe((user:any) => {
      console.log(user); // user is set
      this.user = user; // this does not update the view :(
    });
  }

  public googleSignIn() {
    auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => {
      this.userSubject.next(authResult.code);
    });
  }

}

从'@angular/core'导入{Component，OnInit}；
从'rxjs/Rx'导入{Subject，observeable}；
从“../../../services/auth.service”导入{AuthService}；
导入“rxjs/add/operator/catch”；
声明2：任何；
@组成部分({
选择器：“用户”，
templateUrl:'build/routes/app/user/user.component.html'，
样式URL:['build/routes/app/user/user.component.css']，
提供者：[授权服务]
})
导出类UserComponent实现OnInit{
private userSubject=新主题（）；
公共用户：任何；
public userStream:Observable=this.userSubject.asObservable（）.flatMap（（代码：any）=>{
让restStream=this.authService.signIn（代码）
.map（（响应：任意）=>{
返回JSON.parse（response.\u body）；
}).catch（（错误：任意）=>{
返回可观察。抛出（错误）；
});
返回流；
}).publish（）.refCount（）；
构造函数（公共authService:authService）{
}
恩戈尼尼特（）{
this.userStream.subscribe（（用户：any）=>{
console.log（user）；//用户已设置
this.user=user；//这不会更新视图：(
});
}
公共谷歌签名（）{
auth2.grantoflineAccess（{'redirect_uri'：'postmessage'}）。然后（（authResult:any）=>{
this.userSubject.next（authResult.code）；
});
}
}

观点很简单

<button (click)="googleSignIn()">Google Sign In</button>
<div>USER = {{user | json}}</div>

Google登录
USER={{USER | json}}

如何让Angular2更新视图

---

注意：全局声明auth2指的是全局Google OAuth2-谢谢

让我们通过在subscribe中添加另一个控制台日志来确认是否设置了this.user

console.log(this.user);

我认为应该设置，但UI不更新是您的问题。对于初学者，您可以尝试在超时时包装用户集，看看UI是否会像这样更新

setTimeout( user => this.user = user, 0);

如果这让您可以工作，那么您的设置会导致变量太早/太迟，无法检测到更改

---

setTimeout

不是实现这一点的理想方法，因此我们应该以适当的方式重构您的代码，以确保angular2更改检测能够检测到更改。如果这能让您发布有关模板的更多详细信息或提供一个插件，我们可以看到更好的实现方法。

此解释中可以看到问题自然代码段

public googleSignIn() {
  this.user = {fred:5}; // BINDINGS UPDATE HERE
  auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => {
    this.user = {fred:6}; // BINDINGS DO NOT UPDATE HERE
    this.userSubject.next(authResult.code);
  });
}

任何更新auth2.grantofleaccess中数据的尝试或由此产生的任何函数或流都无法更新视图

我终于用JavaScript事件解决了这个问题

这里的主要区别是在this.userStream.subscribe内部调度一个事件，事件侦听器设置this.user

这是我最后的工作方案

import {Component, OnInit} from '@angular/core';
import {Subject, Observable} from 'rxjs/Rx';
import {AuthService} from '../../../services/auth.service';
import 'rxjs/add/operator/catch';
declare let auth2:any;

@Component({
  selector: 'user',
  templateUrl: 'build/routes/app/user/user.component.html',
  styleUrls: ['build/routes/app/user/user.component.css'],
  providers: [AuthService]
})

export class UserComponent implements OnInit {

  public user:any;

  private userSubject = new Subject<string>();
  public userStream:Observable<any> = this.userSubject.asObservable().flatMap((code:any) => {
    let restStream = this.authService.signIn(code)
      .map((response:any) => {
        return JSON.parse(response._body);
      }).catch((err:any) => {
        return Observable.throw(err);
      });
    return restStream;
  }).publish().refCount();

  constructor(public authService:AuthService) {
  }

  ngOnInit() {
    this.addUserEventListener();
    this.subscribeToUserStream();
  }

  public googleSignIn() {
    auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => {
      this.userSubject.next(authResult.code);
    });
  }

  private addUserEventListener() {
    document.addEventListener('userEvent', (e:CustomEvent) => {
      this.user = e.detail;
    });
  }

  private subscribeToUserStream() {
    this.userStream.subscribe((user:any) => {
      let userEvent = new CustomEvent('userEvent', {'detail': user});
      document.dispatchEvent(userEvent);
    });
  }

}

从'@angular/core'导入{Component，OnInit}；
从'rxjs/Rx'导入{Subject，observeable}；
从“../../../services/auth.service”导入{AuthService}；
导入“rxjs/add/operator/catch”；
声明2：任何；
@组成部分({
选择器：“用户”，
templateUrl:'build/routes/app/user/user.component.html'，
样式URL:['build/routes/app/user/user.component.css']，
提供者：[授权服务]
})
导出类UserComponent实现OnInit{
公共用户：任何；
private userSubject=新主题（）；
public userStream:Observable=this.userSubject.asObservable（）.flatMap（（代码：any）=>{
让restStream=this.authService.signIn（代码）
.map（（响应：任意）=>{
返回JSON.parse（response.\u body）；
}).catch（（错误：任意）=>{
返回可观察。抛出（错误）；
});
返回流；
}).publish（）.refCount（）；
构造函数（公共authService:authService）{
}
恩戈尼尼特（）{
this.addUserEventListener（）；
this.subscribeToUserStream（）；
}
公共谷歌签名（）{
auth2.grantoflineAccess（{'redirect_uri'：'postmessage'}）。然后（（authResult:any）=>{
this.userSubject.next（authResult.code）；
});
}
私有addUserEventListener（）{
document.addEventListener（'userEvent'，（e:CustomEvent）=>{
this.user=e.detail；
});
}
私有订阅流{
this.userStream.subscribe（（用户：any）=>{
让userEvent=newcustomevent（'userEvent'，{'detail'：user}）；
document.dispatchEvent（用户事件）；
});
}
}

此解决方案有效，但我不知道为什么auth2.grantofleaccess会在Angular2中导致此类问题

---

值得知道的是，这个外部auth2.grantofrineaccess===这个内部auth2.grantofrineaccess

非常感谢。虽然这不起作用，也没有在最终解决方案中使用，但您的设置超时想法让我走上了正确的道路，并证明是我的方法的转折点，这让我走上了正确的道路解决方案：）