如何在Angular 8中将属性从父级传递到子级组件？ [英] How to pass property from parent to child component in Angular 8?
问题描述
我有一个DossierEntry数组，如果您选择一个项目，则必须转到该项目。但是，如果现在选择一个项目，则会得到如下错误：
I have an array of DossierEntry and if you select one item that you have to go to that item. But if you now select a item you will get an error like this:
dossier-correspondence-item.component.html：15错误TypeError：无法
读取Object.updateDirectives上未定义
的属性'isJson'（dossier-correspondence-item.component.html：15）
Object.debugUpdateDirectives上[作为updateDirectives]（core.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）
dossier-correspondence-item.component.html:15 ERROR TypeError: Cannot read property 'isJson' of undefined at Object.updateDirectives (dossier-correspondence-item.component.html:15) at Object.debugUpdateDirectives [as updateDirectives] (core.js:30537) at checkAndUpdateView (core.js:29933) at callViewAction (core.js:30174) at execEmbeddedViewsAction (core.js:30137) at checkAndUpdateView (core.js:29934) at callViewAction (core.js:30174) at execComponentViewsAction (core.js:30116) at checkAndUpdateView (core.js:29939) at callViewAction (core.js:30174)
，行是这样的：
<div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
带有数组的Parent组件如下：
The Parent component with the array looks like this:
<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代码对Parent组件的重要性：
and the ts code of the piece of code what important is of Parent component:
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的模型如下：
The model of DossierEntry looks like this:
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;
}
所以我的问题是我必须改变什么？
So my question is what I have to change?
谢谢
所以这在父组件中：
<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});
}
}
我有它已经在父组件中这样声明过：
And I have it already declared in parent component like this:
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，如果我这样做：
oke, And If I do this:
<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
的属性'type'，但是如果我这样做：
But if I do this:
click(i, type) {
console.log('clicked ' + type);
this.onClick.emit({i: i, type: type});
}
我看到：单击的对应内容
，所以这是DossierCorrespondenceItemComponent：
and so this is the 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)
推荐答案
您应该将所选条目存储在父组件中的某个位置
You should store your selected entry somewhere in your parent component
selectedEntry: DossierEntry;
selectEntry(entry: DossierEntry): void {
this.selectedEntry= entry;
}
此外，您应该在角度区域使用（click）事件而不是（onClick） 。
单击时使用selectEntry方法。
Also, you should use (click) event instead of (onClick) in angular. Use the selectEntry method on click.
对子组件的调用应具有@Input（请参见 https://angular.io/guide/component-interaction ）
And your call to child component should have an @Input (see https://angular.io/guide/component-interaction)
调用时子组件，检查selectedEntry的可为空性，对于出现的错误，您会很好的
When calling child component, check nullability of your selectedEntry, and you'll be fine for the error you're having
这篇关于如何在Angular 8中将属性从父级传递到子级组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
