javascript - Object.updateDirectives 中未定义的属性“长度”
问题描述
我有一个 Angular 6 项目。一切似乎都奏效了。仅当我从子菜单项导航到 Correspontie 组件时。
我总是看到消息:
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"> <!– paperclip svg –>-->
<!--<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>
DossierCorrespondenceComponent 看起来像这样:
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;
}
好的,我做了一个 console.log(result): 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>
解决方案
很难说这里的实际错误是什么,但是这种方法:
this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
在订阅处理程序中返回一个未定义的结果,然后你用它调用它:
this.handleCorrespondenceLoad(result)
然后在该方法中检查未定义对象的长度:
if (result.length === 0) {
所以你需要:
如果应该预期未定义,则检查未定义:
if (result && result.length === 0) {
或 2. 确保您的getDossierEntry
observable 不会发出未定义的值
推荐阅读
- java - 为什么Log4J2在log4j2-test.xml之后就停止了,不再继续寻找log4j2.xml了?
- amazon-s3 - Flink s3 读取错误:读取的数据长度与预期不同
- php - 正则表达式在字符串中的任何位置获取语音标记之间的字符串
- node.js - 在节点 js 中连接一个 postgresql 数据库
- firebase - 在 react 项目中安装本地化版本的 firebaseui
- excel - 如何在我的代码中使用从组合框返回的数据?
- bash - 如果多个程序正在从 FIFO 中读取数据,那么按接收顺序提供哪些保证?
- kubernetes - 用证书加密的 Kubernetes 机密?
- php - Laravel 5.8 - 如何排序(orderBy)多重关系
- c# - Asp.net Jwt 令牌验证