Find a Specific Element of an Observable Array and Display in Component HTML

Question

In an Angular 8 accounting application, I have a service for journal entry batches that gets all of the batches and saves to a BehaviorSubject and also a readonly observable of that behaviorsubject. In the component, I have an Observable that calls that readonly on initilization.

I get the list of journal entry batches and can display on the screen just fine with ngFor and async. But, I need to be able to access a journal entry batch by selected period and also the detail data by selected company.

The Journal Entry Batch model has an array of details where each detail is for a specific company.

I have been unable to 1. get and display any data for a specific journal entry by period 2. get and display data for a specific detail by company

I have followed this example and some other examples with no success: https://stackblitz.com/edit/angular-fh1kyp

Service:

@Injectable({
  providedIn: 'root'
})
export class JournalentryBatchService {
  private _batches = new BehaviorSubject<JournalEntryBatch[]>([]);
  private dataStore: { batches: JournalEntryBatch[] } = { batches: []};
  readonly batches = this._batches.asObservable();

  baseUrl = environment.baseUrl;

  constructor(private http: HttpClient) { }

  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

  loadAllBatches() {
     this.http.get<JournalEntryBatch[]>(this.baseUrl + `/journalentry/journalentrybatch`)
      .subscribe(
        data => {
          this.dataStore.batches = data;
          this._batches.next(Object.assign({}, this.dataStore).batches);
        }, error => console.log('Could not get batches'));
  }

Component:

@Component({
  selector: 'app-journalentries',
  templateUrl: './journalentries.component.html',
  styleUrls: ['./journalentries.component.css']
})
export class JournalentriesComponent implements OnInit {
  private company: string = "";
  private period: string;
  batches$: Observable<JournalEntryBatch[]>;
  singleBatch$: Observable<JournalEntryBatch>;
  batch = {} as JournalEntryBatch;
  batchFG: FormGroup;

  constructor(private jeBatchService: JournalentryBatchService) {
    this.batchFG = this.formBuilder.group({});
  }

  ngOnInit() {
    this.batches$ = this.jeBatchService.batches;
    this.jeBatchService.loadAllBatches();

  }

  searchJE() {
    this.company = this.companyService.getSelectedCompany();
    this.period = this.periodService.getSelectedPeriod();
    this.singleBatch$ = this.batches.pipe(map(batches => batches.find(batch => batch.fdFiscYearPer === this.period)));
  }

HTML... I can display the ids of the batches$ but

<div class="container-fluid" >
  <div class="row">
    <div class="col-12">
      <h3>Journal Entries - Select Company And Period</h3>
      <div *ngFor="let batch of batches$ | async">
        {{ batch.fdJournalEntryBatchID }} 
      </div>
      <div>Chosen Batch: {{singleBatch$.fdJournalEntryBatchID | async}}</div>

    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <form [formGroup]="batchFG" (ngSubmit)="searchJE()">
        <mat-card class="jeCard"> <!--[ngStyle]="{'background-color': batchDetail.fdAllApproved? 'lightgreen' : '#FAFAFA'}">-->
          <mat-card-content>
            <app-company [selectedCompany]="company"></app-company>
            <app-accounting-periods [selectedPeriod]="period"></app-accounting-periods>
            <button class="btnGo" mat-raised-button color="primary" type="submit">Go!</button>
          </mat-card-content>
        </mat-card>
      </form>
    </div>

I expect the selected journal entry batch ID to be displated but I get this error:

ERROR TypeError: Cannot read property 'fdJournalEntryBatchID' of undefined

and, once I can access the selected batch, I then will need to be able to access the selected detail.

Answer 1

You are trying to get a fdJournalEntryBatchID property of an Observable. It doesn't have such property.

Replace singleBatch$.fdJournalEntryBatchID | async with (singleBatch$ | async)?.fdJournalEntryBatchID