代码之家 › 专栏 › 技术社区 › ishandutta2007

如何在角度模板中访问可观察变量的属性?

rxjs angular

ishandutta2007 · 技术社区 · 8 年前

认证。服务输电系统

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { AngularFireAuth } from 'angularfire2/auth';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class AuthService {
  public currentUser;
  constructor(private afAuth: AngularFireAuth,
    private router: Router) {
  }
}

应用程序标题导航栏用户。组成部分输电系统

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { AuthService } from '../../../shared/services/auth.service';

import { environment } from '../../../../environments/environment';
import { constants } from '../../../../constants';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
  selector: 'app-header-navbar-user',
  template: `
  <div (click)="change()">CHANGEdisplayName</div>
  <div>{{ CUser$.displayName }}</div>
  `,
  changeDetection: ChangeDetectionStrategy.Default
})
export class AppHeaderNavbarUserComponent {
  public CUser$: Observable<any> =Observable.of(this.authService.currentUser);

  constructor(private authService: AuthService) {
  }

  ngOnInit() {
    this.authService.currentUserObs$.subscribe((x) => {
      console.log("signInUser:ngOnInitIN:" + x);//always undefined here no matter what. 
    });
  }

  change() {
    if (!this.authService.currentUser)
           this.authService.currentUser = {};
    this.authService.currentUser['displayName'] = "YOMAN";//breaks here saying invalid property
  }

2 回复 | 直到 8 年前

acdcjunior Mukul Kumar 8 年前

尝试使用 ? (elvis)操作员:

<div>{{ (CUser$ | async)?.displayName }}</div>

另外,我看到您正在尝试更新 this.currentUser 并期望 this.CUser$ 改变。

你需要的是 这库塞$ 成为一个 BehaviorSubject --而不是简单的 Observable --要更新它,请致电 .next(<new user>) .

完整的组件/示例如下:

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Component({
  selector: 'app-root',
  template: `
  <h1>Display Name: "{{ (CUser$ | async)?.displayName }}"</h1>

  <button (click)="change()">CHANGE!</button>
  `
})
export class AppComponent {
  private currentUser;

  // here, the value of this.currentUser is used as initial value of the observer CUser$
  // to change the value of CUser$, you must call CUser$.next(NEW VALUE).
  public CUser$: BehaviorSubject<any> = new BehaviorSubject<any>(this.currentUser);


  change() {
    this.currentUser = new User('Bob Nelson ONE'); // has no effect, just changes the currentUser

    this.CUser$.next(new User('Bob Nelson TWO')); // updates the CUser$
  }
}

class User  {
  constructor(public displayName: string) {}
}

Plunker link here .

bryan60 8 年前

对于ngIf,应该使用“as”语法

<div *ngIf="CUser$ | async as CUser"> {{ CUser.displayName }} </div>