Компонент за ngIf не загружается

Question

Работа с небольшим трехкомпонентным приложением Angular, и у меня есть компонент с именем container, в котором находится компонент form и компонент grid. grid скрыт за *ngIf, который поочередно показывает компонент mat-card с некоторыми шаблонами.

mat-card показывает нормально, но grid не загружается должным образом в augary и не загружает данные в данный момент. У меня может появиться больше вопросов об этом в ближайшее время.

во-первых, вот container

//container.component.ts
import { Component, OnInit } from '@angular/core';

import { Transaction } from '../interfaces/transaction';
import { Subscription } from 'rxjs';

import { TransactionService } from '../transaction.service';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.sass'],
})
export class ContainerComponent implements OnInit {
  trxQuery: Subscription;
  trx: string;
  conf: number;
  valid: Boolean;
  constructor(private ts: TransactionService) {}

  trxSelected: Boolean;

  confValid: Boolean;

  updateSearch({ selectedId, confidence }) {
    this.trx = selectedId;
    this.conf = confidence;
    this.valid = this.getValidity();
    console.log(this.valid);
    if (this.valid) {
      this.ts.updateTransactions(selectedId, confidence);
    }
  }

  updateValidity() {
    this.trxSelected =
      this.trx !== '' && this.trx !== 'undefined' ? true : false;
    this.confValid = this.conf <= 1 ? true : false;
  }

  getValidity(): Boolean {
    return this.trxSelected && this.confValid;
  }

  initializeQuery(trx: string, conf: any) {
    this.ts.updateTransactions(trx, conf);
  }

  ngOnInit() {
    this.updateValidity();
    this.valid = this.getValidity();
    if (this.getValidity()) {
      this.initializeQuery(this.trx, this.conf);
    }
  }
}

//container.component.html

<div class="container">
  <app-form (searcher)="updateSearch($event)"></app-form>
  <app-grid *ngIf="valid; else pending"></app-grid>
  <ng-template #pending>
    <mat-card class="primary">
      <h1>Please Select A Transaction</h1>
    </mat-card>
  </ng-template>
</div>

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

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

//transaction.service.ts
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import {map} from 'rxjs/operators';

import { Apollo, Query } from 'apollo-angular';
import gql from 'graphql-tag';


export interface Transactions {
  id: string;
  connectionInfo:string;
  confidence:number;
  name: string;
  email: string;
  phone: string;
  age: string;
}

@Injectable({
  providedIn: 'root'
})
export class TransactionService {
  transactions: Subject<Transactions[]>;
  constructor(private apollo: Apollo) { }

  getTransactions() {
    return this.transactions;
  }

  updateTransactions(id: string, confidence: number) {
    this.apollo.watchQuery<Query>({
      query: gql`
      query getTransactions($transID: String!, $confidence: Float) {
        transactions(parentID: $transID, confidence: $confidence) {
          id
          childrens {
            id
            name
            email
            phone
            age
            connectionInfo {
              type
              confidence
            }
          }
          name
          email
          phone
          age
        }
      }
      `,
      variables: {
        transID: id,
        confidence: confidence
      }
    }).valueChanges.pipe(map((query: any) => {
      const { transactions } = query.data;
      const childrens = transactions.childrens.map(c => ({
        id: c.id,
        connectionInfo: c.connectionInfo.type,
        confidence: c.connectionInfo.confidence,
        name: c.name,
        email: c.email,
        phone: c.phone,
        age: c.age
      }));
      return childrens as Transactions[];
    }));
  }
}

//grid.component.ts

import {
  Component,
  OnInit,
  Input,
  OnChanges,
  SimpleChanges,
} from '@angular/core';

import { Transactions } from '../transaction.service';
import { GridOptions } from 'ag-grid-community';
import { Observable } from 'rxjs';

import { TransactionService } from '../transaction.service';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.sass'],
})
export class GridComponent implements OnInit {
  columnDefs = [
    { headerName: 'Transaction ID', field: 'id' },
    { headerName: 'ConnectionInfo', field: 'connectionInfo' },
    { headerName: 'ConfidenceLevel', field: 'confidence' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Email', field: 'email' },
    { headerName: 'Phone', field: 'phone' },
    { headerName: 'Age', field: 'age' },
  ];

  gridOptions: GridOptions = {
    columnDefs: this.columnDefs,
  };
  rowData: Observable<Transactions[]>;

  constructor(private ts: TransactionService) {}

  ngOnInit() {
    this.rowData = this.ts.getTransactions();
  }
}


//grid.component.html
<ag-grid-angular
  style="width: 90vw; height: 60vh;"
  class='ag-theme-balham'
  [rowData]='rowData | async'
  [gridOptions]='gridOptions'
>
</ag-grid-angular>