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

Question

在一个 Angular 8 会计应用程序中，我有一个日记帐分录批次服务，它获取所有批次并保存到 BehaviorSubject 以及该 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({
  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，但出现此错误：

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

而且，一旦我可以访问选定的批次，我就需要能够访问选定的详细信息。

Answer 1

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

将singleBatch$.fdJournalEntryBatchID | async替换为(singleBatch$ | async)?.fdJournalEntryBatchID

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

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

behaviorsubject

angular2-services

angular2-observables

angular