奇怪的订阅行为

Question

我正在使用Angular 6，并且有一个奇怪的订阅行为，因此，当我从构造函数调用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>

company.service.ts

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$;
    }

Answer 1

您似乎需要从服务器收到的最新值。您可以使用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();
    }