Question

我遇到的问题是：当从“localhost /”转到“localhost / accounts /：account_id”或反之时，AngularFire Observable设置的属性会丢失其值。

在我的Chrome DevTools中在第一次调用 onInit（）时，记录 this.accounts

但 onInit（）的每次第二次调用 this.accounts 未被记录;和accounts.component.html循环帐户显示没有任何价值，除非Firestore中有更改或刷新整个页面。

我想要实现的是 this.accountsService.getAccounts（）在调用onInit（）时被触发

到目前为止，这是我的代码
app.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'accounts/:account_id', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

home.component.html

...
  <app-accounts></app-accounts>
...

<h2 class="">Transactions</h2>
<div class="list-group list-accounts">
<a routerLink="" class="list-group-item list-group-item-action">
Add Funds
</a>
<a routerLink="" class="list-group-item list-group-item-action">Spend</a>
<a routerLink="" class="list-group-item list-group-item-action">Transfer</a>
<a routerLink="" class="list-group-item list-group-item-action">Receive</a>
</div>

accounts.service.ts

@Injectable()
export class AccountsService {
accountsCollection: AngularFirestoreCollection<Account>;


accounts: Observable<Account[]>;

  constructor(public afs: AngularFirestore) {

    this.accountsCollection = this.afs.collection<Account>('accounts');
    this.accounts = this.accountsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Account;
        data.accountId = a.payload.doc.id;
        return data;
      });
    });

  }


  getAccounts() {
    return this.accounts;
  }


}

accounts.component.ts

export class AccountsComponent implements OnInit {


accounts: Account[];

constructor(private route: ActivatedRoute, private accountsService: AccountsService) { }

ngOnInit() {

console.log('onInit()');

this.accountsService.getAccounts().subscribe( accounts => {
  this.accounts = accounts;
  console.log(this.accounts);
});

}

}

和
account.component.html

<div class="list-group list-accounts">
    <a *ngFor="let account of accounts"
    class="list-group-item list-group-item-action"
    routerLink="/accounts/{{account.accountId}}"> {{account.name}} </a>
</div>

Answer 1

尝试将您的值放在Subject或BehaviorSubject中：

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

@Injectable()
export class AccountsService {
accountsCollection: AngularFirestoreCollection<Account>;


private accounts = new BehaviorSubject<Account[]>([]);

  constructor(public afs: AngularFirestore) {

    this.accountsCollection = this.afs.collection<Account>('accounts');
    this.accountsCollection.snapshotChanges().map(actions => {
     this.accounts.next( 

        actions.map(a => {
           const data = a.payload.doc.data() as Account;
           data.accountId = a.payload.doc.id;

           return data;
        })

      );
    });

  }


  getAccounts(): Observable<Account[]> {
    return this.accounts.asObservable();
  }


}

Observable设置的属性值在routerLink重定向上丢失值

1 个答案: