Angular 中的 NgIf 块中断了 Http 调用

Question

在没有 ngIf 块的情况下，http 调用工作正常并且 table 正在填充而没有任何问题，但是使用 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);
  }

错误类型错误：无法读取未定义的属性 'next' 在 SafeSubscriber._next（服务-now.component.ts:124）在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) 在

Answer 1

看起来你没有初始化你的变量taskObserver

确保你已经初始化为-

taskObserver = new Subject<any>();

Answer 2

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

在您的代码中，您直接尝试为未定义的值赋值variable.So确保您定义或为此赋值。

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

here you go...good ref site for explanantion

Angular 中的 NgIf 块中断了 Http 调用

NgIf block in Angular breaks Http Call

angular

angular5