查找可观察数组的特定元素并在组件HTML中显示

Question

在Angular 8会计应用程序中，我有一个用于日记帐分录批处理的服务，该服务获取所有批处理并将其保存到BehaviorSubject，并对该行为主题进行只读观察。在组件中，我有一个Observable，它在初始化时调用只读方法。

我得到了日记帐分录的列表，并且可以通过ngFor和async很好地显示在屏幕上。但是，我需要能够按选定的期间访问日记帐分录批处理，还需要按选定的公司访问明细数据。

日记帐分录批处理模型具有一系列详细信息，其中每个详细信息都是针对特定公司的。

我一直无法1.按期间获取并显示特定日记帐分录的任何数据2.按公司获取并显示特定详细信息的数据

我已遵循此示例和其他一些示例，但均未成功：https://stackblitz.com/edit/angular-fh1kyp

服务：

@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 ...我可以显示批次的ID，但

<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>

我希望选定的日记帐分录批次ID会显示出来，但出现此错误：

错误TypeError：无法读取未定义的属性'fdJournalEntryBatchID'

并且一旦我可以访问选定的批次，那么我将需要能够访问选定的详细信息。

Answer 1

您正在尝试获取Observable的fdJournalEntryBatchID属性。它没有这种属性。

用singleBatch$.fdJournalEntryBatchID | async替换(singleBatch$ | async)?.fdJournalEntryBatchID