属性'length' of undefined at Object.updateDirectives

Question

我有一个 Angular 6 项目。 一切似乎都正常。当我从子菜单项导航到相应的组件时。

我总是看到以下消息：

ERROR TypeError: Cannot read property 'length' of undefined
    at Object.updateDirectives (dossier-correspondence-item.component.ts:51)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
    at checkAndUpdateView (core.js:11307)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)

谷歌搜索了很多。 并搜索教程。

因此，DossierCorrespondenceItemComponent 组件如下所示：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { DossierEntry } from 'app/interfaces/dossier/dossier-entry.interface';
@Component({
  selector: 'app-dossier-correspondence-item',
  templateUrl: './dossier-correspondence-item.component.html',
})
export class DossierCorrespondenceItemComponent implements OnInit {
  @Input() item: DossierEntry;
  @Output() goBack = new EventEmitter();
  safeHTMLUrl: SafeResourceUrl;
  fileLoading = false;
  showFile = false;
  canOpenBlob = false;
  constructor(
    public sanitizer: DomSanitizer,
    private router: Router  ) {
    // IE/Edge specific
    this.canOpenBlob = !!window.navigator && !!window.navigator.msSaveOrOpenBlob;
  }
  handleGoBack() {
    this.goBack.emit();
  }
  openPdf(dossierEntryId: number) {
    this.router.navigate(['dossier/overig/pdf/', dossierEntryId]);
  }
  ngOnInit() {
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }
  openInNewTab() {
    const popup = window.open('', '_blank');
    popup.document.write(this.item.summary);
  }
}

我收到的错误消息是这样的：

ERROR TypeError: Cannot read property 'length' of undefined
    at Object.updateDirectives (dossier-correspondence-item.component.ts:51)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
    at checkAndUpdateView (core.js:11307)
    at callViewAction (core.js:11548)
    at execComponentViewsAction (core.js:11490)
    at checkAndUpdateView (core.js:11313)
    at callViewAction (core.js:11548)
    at execEmbeddedViewsAction (core.js:11511)
    at checkAndUpdateView (core.js:11308)
    at callViewAction (core.js:11548)

这是 html：

<div *ngIf="!showFile" class="main-row">
    <section class="data-entry correspondence-item">
        <div class="panel-generic">
            <div class="correspondence-item-p correspondence-item-date">
                <i class="fa fa-calendar font-darkest"></i><p class="correspondence-item-text font-darkest">{{ item.date | date:"dd-MM-y HH:mm" }}</p>
            </div>
            <div class="correspondence-item-p correspondence-item-subject">
                <i class="fa fa-tag font-darkest"></i><p class="correspondence-item-text font-darkest">{{ item.name }}</p>
            </div>
            <div class="correspondence-item-p correspondence-item-message">
                <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe class="generic-iframe" [src]="safeHTMLUrl"></iframe>
                </div>
                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
                </ng-template>
            </div>
        </div>
    </section>
    <section class="data-entry correspondence-item" style="margin-left:15px" >
        <button type="button" class="button correspondence-back-button" (click)="handleGoBack()">Terug naar overzicht</button>
        <div  *ngIf="item.hasFile" title="Open PDF"
            style="margin-left:-8px; width:32px"
            class="trigger correspondence-back-button" (click)="openPdf(item.dossierEntryId)">
            <!--<svg style="fill: currentColor" width="32" height="32" viewBox="0 0 24 24"> &lt;!&ndash; paperclip svg &ndash;&gt;-->
                <!--<path d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z" />-->
            <i class="fa fa-file-pdf-o fa-2x" style="margin-left: 8px"></i>
        </div>
    <p class="iframe-hasError" *ngIf="canOpenBlob && item.summary">
      Kun je dit bericht niet bekijken ? <span class="clickable underlined" (click)="openInNewTab()">Klik hier</span>
    </p>
    </section>
</div>

达析报告通信组件如下所示：

import { Component, OnInit } from '@angular/core';
import { HealthAPIService } from '../../shared/health-api/health-api.service';
import { DossierEntry } from '../../interfaces/dossier/dossier-entry.interface';
@Component({
  selector: 'app-dossier-correspondence',
  templateUrl: './dossier-correspondence.component.html',
})
export class DossierCorrespondenceComponent implements OnInit {
  allCorrespondence: Array<DossierEntry>;
  correspondenceEntries: Array<DossierEntry>;
  attachmentEntries: Array<DossierEntry>;
  message = '';
  emptyMessage = 'Geen correspondentie.';
  errorMessage = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
  correspondenceLoaded = false;
  showingSingle = false;
  single: DossierEntry;
  constructor(private healthAPIService: HealthAPIService) {}
  handleCorrespondenceLoad(result) {
    if (result.length === 0) {
      this.message = this.emptyMessage;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];
    for (let entry of result) {
      switch (entry.type) {
        case 'correspondence': {
          this.correspondenceEntries.push(entry);
          break;
        }
        case 'attachments': {
          this.attachmentEntries.push(entry);
          break;
        }
        default: {
          console.log('Dossier correspondence heeft een invalide entry soort teruggegeven');
          break;
        }
      }
    }
  }
  gotoItem(index, type: string) {
    this.showingSingle = true;
    // this.single = this.allCorrespondence[index];
    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        console.log('Er is op een ongeldige soort dossier entry geklikt');
        break;
      }
    }
  }
  goBack(event) {
    this.showingSingle = false;
  }
  ngOnInit() {
    this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
      this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
    }, msg => (this.message = this.errorMessage));
  }
}

在最后一个括号上：

openInNewTab() {
    const popup = window.open('', '_blank');
    popup.document.write(this.item.summary);
  }
} -- here I get this error

if (result &&  result.length === 0) {
      this.message = this.emptyMessage;
      return;
    }

好吧，我做了一个控制台.log(结果(： IUT 现在是一个包含 16 个对象的数组。 其中一个对象是这样的：

0:
date: "2018-01-11T13:59:48.203125+01:00"
dossierEntryId: 160
file: null
hasFile: true
isJson: false
jsonSummary: null
name: "Hartrevalidatie intake"
referenceId: "326222220501"
summary: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans"
type: "correspondence"
__proto__: Object

我收到这一行的错误：

<app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>

Answer 1

很难说出这里的实际错误是什么，但是，这种方法：

this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {

在订阅处理程序中返回一个未定义的结果，然后你用它调用它：

this.handleCorrespondenceLoad(result)

然后在该方法中检查未定义对象的长度：

if (result.length === 0) {

因此，您需要：

1. 如果预期应未定义，请检查未定义：

   if (result && result.length === 0) {

或 2. 确保可观察getDossierEntry不会发出未定义的值