ng后面的组件如果不加载

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>

窗体加载，并且当用户单击提交按钮时，网格显示为带有加载标记。

我不确定要记录此问题还需要什么，但是我将包括服务和网格组件：

{{1}}