Javascript 财产'；长度'；未定义在Object.updateDirectives的

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

我总是看到这样的信息：

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);
  }
}

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));
  }
}

我收到的错误消息是：

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>

oke，我做了一个console.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

0:
日期：“2018-01-11T13:59:48.203125+01:00”
档案类型：160
文件：空
hasFile：对
isJson:false
jsonSummary:null
名称：“Hartrevalidatie取水口”
参考ID:“32622220501”
总结：“很难判断实际错误是什么，但是，这种方法：

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

正在subscribe处理程序中返回未定义的结果，然后在其中调用它：

this.handleCorrespondenceLoad(result)

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

if (result.length === 0) {

因此，您需要：

检查未定义，如果预期为未定义：

if（result&&result.length==0）{

或者2.确保您的
getDossierEntry
observable不会发出未定义的值
很难判断此处的实际错误，但此方法：

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

正在subscribe处理程序中返回未定义的结果，然后在其中调用它：

this.handleCorrespondenceLoad(result)

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

if (result.length === 0) {

因此，您需要：

检查未定义，如果预期为未定义：

if（result&&result.length==0）{

或者2.确保你的
getDossierEntry
observable没有发出未定义的值
有人知道是哪个属性引发了这个错误吗？我更新了帖子。但是我没有看到wicht属性yif（result&&result.length==0）{}在这个方法的DossierCorrespondenceComponent中handleCorrespondenceLoad。尝试更改它Hi，谢谢你的评论。我现在正在尝试将Angular 6更新为Angular 7。我的意思是，如果我完成了，我可以尝试一下。有人知道吗？哪个属性引发了这个错误我更新了帖子。但是我看不到Angular 6的属性（result&&result.length==0）{}在这个方法handleCorrespondenceLoad的DossierCorrespondenceComponent中。尝试更改这个HI，谢谢你的评论。我现在正在尝试将Angular 6更新为Angular 7。我的意思是，如果我完成了，我可以尝试一下。