代码之家 › 专栏 › 技术社区 › Karim Garali

奇怪的订阅行为

angular7 angularfire2 observable angular

Karim Garali · 技术社区 · 6 年前

我正在使用Angular6,我有一个奇怪的订阅行为,所以当我从构造函数中调用reload方法三次时,它工作得很好,我得到了三条日志消息“subscribe”。

但是,当我单击一个按钮,其中有(click)=“reload()”,重新加载执行,但订阅永远不会执行。

company-edit.component.ts公司

export class CompanyEditComponent implements OnInit {
company$ : Observable<any>;
company: Company;
formCompany: Company;
refDb: any;

  constructor(private db: AngularFireDatabase, private companyService: CompanyService) {
    this.refDb = db.object('company');
    this.company$ = this.companyService.getCompanyObservable();
    this.reload();
    this.reload();
    this.reload();
  }

  reload(){
    console.log("reload");
    this.refDb = this.db.object('company');
    this.company$ = this.companyService.getCompanyObservable();
    this.formCompany = new Company("","");
    this.company$.subscribe( (company)=>{ console.log("subscribe");

      this.company = company;
      console.log(this.company);

      if (company)
        this.formCompany = company;
    });
    // this.formCompany = {"name":"kk","fondator":"gg"};
  }

company-edit.component.html公司

<div>
        <mat-form-field>
            <input matInput [(ngModel)]="formCompany.name" placeholder="Name">
        </mat-form-field>
        <br>
        <mat-form-field>
            <input matInput [(ngModel)]="formCompany.fondator"  placeholder="Fondateur">
        </mat-form-field>
        <br>
        <button mat-raised-button color="primary"(click)="submit()">Save</button> |
        <button mat-raised-button color="accent"(click)="update()">Update</button> |
        <button mat-raised-button color="warn"(click)="delete()">Delete</button> |
        <button mat-raised-button color="" (click)="reload()">Reload</button>
    </div>

公司服务

export class CompanyService {
  company$ : Observable<any>;
  refDb: any;

    constructor(private db: AngularFireDatabase) {
      this.refDb = db.object('company');
      this.company$ = this.refDb.valueChanges();
    }

    getCompanyObservable(){
      return this.company$;
    }

1 回复 | 直到 6 年前

Sunil Singh 6 年前

看起来您需要从服务器接收的最新值。你可以通过使用 BehaviorSubject

export class CompanyService {
  //company$ : Observable<any>;

   public data: BehaviorSubject<any> = new BehaviorSubject(null);

   refDb: any;

    constructor(private db: AngularFireDatabase) {
      this.refDb = db.object('company');
      //this.company$ = this.refDb.valueChanges();
      this.refDb.valueChanges().subscribe(data=>this.data.next(data));
    }

    getCompanyObservable(){
      return this.data.asObservable();
    }