奇怪的订阅行为答案

【问题标题】：Strange subscribe behaviour奇怪的订阅行为
【发布时间】：2018-11-16 15:53:55
【问题描述】：

我正在使用 Angular 6 并且我有一个奇怪的订阅行为，所以当我从构造函数调用 reload 方法三次时它工作正常并且我收到了三个日志消息“订阅”。

但是当我点击一个带有(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$;
    }

【问题讨论】：

只是附注，但如果您在表单中有这些按钮，您应该指定按钮类型，否则它们将默认为提交按钮而不是 type="button"。我不知道您的情况是否触发了事件。
是的，我应该在表单中提到按钮的类型，但是对于这个例子，当我单击“重新加载”按钮时，函数 reload() 被正确调用，但在执行时 sucscribe 被忽略.
你为什么要重新订阅company$？这有点违背了目的。我的猜测是您在加载时看到 3 个日志的原因是因为订阅在 Observable 发出数据之前就已到位。如果没有任何变化，它将不会发出数据，这就是您看不到“订阅”日志的原因。

标签： angular observable angularfire2 angular7

【解决方案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();
    }

【讨论】：