Angular 中的 NgIf 块中断了 Http 调用

Question

没有 ngIf 块，http 调用可以正常工作，并且表格被填充而没有任何问题，但是使用 ngIf 块，我得到的错误是

<div *ngIf="isloading; else other_content">
      <ng-template #content>
        <mat-progress-spinner [color]="color"
                              [mode]="mode"
                              [value]="value">
        </mat-progress-spinner>
      </ng-template>
    </div>
    <ng-template #other_content>
      <uitk-dynamic-table id="incidentTable" #dt [model]="incidents" [modelObservable]="incidentObservable">
        <uitk-column-def [id]="incidents.columns[0].id">
          <ng-template #cellTemplate let-col="column" let-record="record">
            <span>{{record[col.id]}}</span>
          </ng-template>
        </uitk-column-def>
      </uitk-dynamic-table>
      <h2>Tasks</h2>
      <uitk-dynamic-table id="taskTable" #dt [model]="tasks" [modelObservable]="taskObservable">
        <uitk-column-def [id]="tasks.columns[0].id">
          <ng-template #cellTemplate let-col="column" let-record="record">
            <span>{{record[col.id]}}</span>
          </ng-template>
        </uitk-column-def>
      </uitk-dynamic-table>
    </ng-template>

这是组件代码

    private incidentObservable: Observable<any>;
  private incidentObserver: Observer<any>;
  private taskObservable: Observable<any>;
  private taskObserver: Observer<any>;
  private employeeID: string;
  private msID: string;
  private incidentAPI: string;
  private incidentID: string;
  private taskAPI: string;
  private id: string;
  private isloading: boolean;

  color = 'primary';
  mode = 'indeterminate';
  value = 50;

  incidents = {
    title: 'Incidents',
    enableSorting: true,
    enableFiltering: false,
    clearAllFilters: false,
    caseSensitiveFilter: true,
    fixedHeader: true,
    filterCondition: {
      columnSorting: {
        columnId: 'IncidentId',
        sortOrder: 1
      }
    },
    columns: [
      { label: 'Incident', id: 'IncidentId', dataType: 'text' },
      { label: 'Description', id: 'ShortDescription', dataType: 'text' },
      { label: 'Assignment', id: 'Assignment', dataType: 'text' },
      { label: 'State', id: 'State', dataType: 'text' },
      { label: 'UksProduct', id: 'UksProduct', dataType: 'text' },
      { label: 'Owner', id: 'WorkgroupOwner', dataType: 'text' },
      { label: 'Opened', id: 'DateOpened', dataType: 'date' },
      { label: 'SLA', id: 'SlaIndicator', dataType: 'text' },
      { label: 'Caller', id: 'SlaIndicator', dataType: 'text' },
      { label: 'Closed', id: 'SlaIndicator', dataType: 'date' }
    ],
    records: []
  };


  tasks = {
    title: 'Tasks',
    enableSorting: true,
    enableFiltering: false,
    clearAllFilters: false,
    caseSensitiveFilter: true,
    fixedHeader: true,
    filterCondition: {
      columnSorting: {
        columnId: 'TaskId',
        sortOrder: 1
      }
    },
    columns: [
      { label: 'Task', id: 'TaskId', dataType: 'text' },
      { label: 'Description', id: 'ShortDescription', dataType: 'text' },
      { label: 'Assignment', id: 'Assignment', dataType: 'text' },
      { label: 'State', id: 'State', dataType: 'text' },
      { label: 'Opened', id: 'CreateDate', dataType: 'date' },
      { label: 'Caller', id: 'SlaIndicator', dataType: 'text' },
      { label: 'Closed', id: 'SlaIndicator', dataType: 'date' }
    ],
    records: []
  };

  tempModel = {
    subText: "The application will be available shortly."
    //imageUrl: "../../loading.png" // Test to display under the Page Loader
  };

  constructor(private _http: HttpClient, private _cardService: DashboardCardService, private plis: PageLoadingIndicatorService) {
    this.incidentObservable = new Observable(obj => this.incidentObserver = obj);
    this.taskObservable = new Observable(obj => this.taskObserver = obj);
  }

  ngOnInit() {

    this.plis.showLoader();
    this.isloading = true;

    this._cardService.InputData.subscribe(data => {
      this.employeeID = data.EmployeeId;
      this.msID = data.MSId;
      this.incidentID = data.MSId;
    });
    // if employeeID is null, then msid would be used to fetch the data. employeeID is given preference over msid as it will be more accurate. If required, we can change the order later
    this.id = this.employeeID || this.msID || this.incidentID;

    this.getIncidentData().subscribe((incidentResponse) => {
      setTimeout(() => {
        this.isloading = false;
        console.log(incidentResponse);
        this.incidents.records = incidentResponse.Incidents.slice(0, 5);
        this.incidentObserver.next(this.incidents);

      }, 8000);

    });

    this.getTaskData().subscribe((taskResponse) => {
      console.log(taskResponse);
      this.tasks.records = taskResponse.Tasks.slice(0, 5);
      this.taskObserver.next(this.tasks);

    });
  }

  getIncidentData(): Observable<any> {
    //If you are running just the angular App alone instead of running the entire application, uncomment the below line and comment the service call
    //return this._http.get('incident.json');
    this.incidentAPI = AppConstants.incidentAPI + this.id;
    return this._cardService.getIncidentData(this.incidentAPI);
  }

  getTaskData(): Observable<any> {
    //If you are running just the angular App alone instead of running the entire application, uncomment the below line and comment the service call
    // return this._http.get('task.json');
    this.taskAPI = AppConstants.taskAPI + this.id;
    return this._cardService.getTaskData(this.taskAPI);
  }

ERROR TypeError: Cannot read property 'next' of undefined 在 SafeSubscriber._next (service-now.component.ts:124) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) 在

Answer 1

您需要在动态填充的 .ts 文件中声明和初始化每个变量。

在您的代码中，您直接尝试将值分配给未定义的变量。因此请确保为此定义或分配一些值。

taskObserver = new Subject<any>(); //import { Subject } from 'rxjs';

here you go...good ref site for explanantion