我有DossierEntry的数组，如果你选择一个项目，你必须去到该项目。 但是，如果你现在选择一个项目，你会得到这样的错误：
卷宗-对应-item.component.html：15 ERROR类型错误：在Object.debugUpdateDirectives [按updateDirectives]（芯：不能在Object.updateDirectives（15卷宗-对应-item.component.html）读取的未定义的属性 'isJson'。 JS：30537）在checkAndUpdateView（core.js：29933）在callViewAction（core.js：30174）在execEmbeddedViewsAction（core.js：30137）在checkAndUpdateView（core.js：29934）在callViewAction（core.js：30174）在execComponentViewsAction（core.js：30116）在checkAndUpdateView（core.js：29939）在callViewAction（core.js：30174）
而行是这样的：
<div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
与阵列父组件看起来是这样的：
<ng-container *ngIf="correspondenceEntries">
<app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
</ng-container>
<ng-container *ngIf="attachmentEntries">
<app-dossier-correspondence-attachments
[attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
></app-dossier-correspondence-attachments>
</ng-container>
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
</app-vital10-page>
和一段代码的TS码是父组件什么重要的：
gotoItem(index, type: string) {
switch (type) {
case 'correspondence': {
console.log('triggered');
this.single = this.correspondenceEntries[index];
break;
}
case 'attachments': {
this.single = this.attachmentEntries[index];
break;
}
default: {
break;
}
}
this.showingSingle = true;
}
DossierEntry的模式是这样的：
export class DossierEntry {
dossierEntryId: number;
date: string;
name: string;
referenceId: string;
summary: string;
jsonSummary: Array<DossierEntryHeader>;
isJson: boolean;
hasFile: boolean;
file: Blob;
fileName: string;
type: string;
}
所以我的问题是我有什么改变？
谢谢
因此，这是在父组件：
<ng-container *ngIf="correspondenceEntries">
<app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
</ng-container>
<ng-container *ngIf="attachmentEntries">
<app-dossier-correspondence-attachments
[attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
></app-dossier-correspondence-attachments>
</ng-container>
这是子组件：
<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">
<div class="main-row main-row-dossier">
<section class="data-entry">
<h3 class="dossier-header">Algemeen</h3>
<table class="dossier-table" *ngIf="correspondenceEntries else loadingCorrespondenceEntires ">
<thead class="dossier-tableheader">
<tr>
<th class="dossier-tablehead fixed-one-fifth">Datum</th>
<th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
</tr>
</thead>
<tbody class="dossier-tablebody">
<tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="click(i, entry.type)">
<td>{{ entry.date | date:"dd-MM-y" }}</td>
<td>{{ entry.name }}</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<ng-template #loadingCorrespondenceEntires>
<div>..Loading </div>
</ng-template>
和TS文件：
export class DossierCorrespondenceListComponent implements OnInit {
@Input()
correspondenceEntries: DossierEntry[];
@Output() onClick = new EventEmitter();
@Input() showingSingle;
constructor() { }
ngOnInit() {
}
// tslint:disable-next-line: use-life-cycle-interface
ngOnChanges(changes) {
}
click(i, type) {
this.onClick.emit({i: i, type: type});
}
}
我有它已经在这样的父组件声明：
export class DossierCorrespondenceComponent implements OnInit {
correspondenceEntries$: Observable<DossierEntry[]>;
attachmentEntries$: Observable<DossierEntry[]>;
@Input() allCorrespondence: Array<DossierEntry>;
@Input() correspondenceEntries: Array<DossierEntry>;
@Input() attachmentEntries: Array<DossierEntry>;
//@Input() myGotoItem: Function;
message = '';
emptyMessageCorrespondentie = 'Geen correspondentie.';
errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
correspondenceLoaded = false;
showingSingle = false;
single: DossierEntry;
OKE，如果我这样做：
<ng-container *ngIf="correspondenceEntries">
<app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (click)="gotoItem(i, entry.type)"> </app-dossier-correspondence-list>
</ng-container>
我得到这个错误：
ERROR TypeError: Cannot read property 'type' of undefined
但是，如果我这样做：
click(i, type) {
console.log('clicked ' + type);
this.onClick.emit({i: i, type: type});
}
我看到： clicked correspondence
所以这是DossierCorrespondenceItemComponent：
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);
}
}
}
这就是错误：
Cannot read property 'isJson' of undefined
at DossierCorrespondenceItemComponent.push../src/app/dossier/dossier-correspondence-item/dossier-correspondence-item.component.ts.DossierCorrespondenceItemComponent.ngOnInit (dossier-correspondence-item.component.ts:36)
