Найти определенный элемент наблюдаемого массива и отобразить в компонентном HTML - PullRequest
Новая
       26

Найти определенный элемент наблюдаемого массива и отобразить в компонентном HTML

0 голосов
/ 23 октября 2019

В бухгалтерском приложении 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({
  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 ... Я могу отобразить идентификаторы пакетов $но 

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

Я ожидаю, что идентификатор пакета выбранной записи журнала будет смещен, но я получаю эту ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'fdJournalEntryBatchID' с неопределенным значением

и, как только я смогу получить доступ к выбранной партии, мне потребуется доступ к выбранной детали.

1 Ответ

1 голос
/ 23 октября 2019

Вы пытаетесь получить свойство fdJournalEntryBatchID объекта Observable. У него нет такого свойства.

Заменить singleBatch$.fdJournalEntryBatchID | async на (singleBatch$ | async)?.fdJournalEntryBatchID

...