[英]@input on component gives error: Property 'showingSingle' does not exist on type
SO I have a angular 8 application.所以我有一个 angular 8 应用程序。
And I have this in the component DossierCorrespondenceComponent:我在组件 DossierCorrespondenceComponent 中有这个:
@Input() showingSingle = false;
So that I can use it in a other component(DossierCorrespondenceListComponent).这样我就可以在其他组件(DossierCorrespondenceListComponent)中使用它。 But if I do this:
但如果我这样做:
<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">
Then I will get this error:然后我会得到这个错误:
Property 'showingSingle' does not exist on type 'DossierCorrespondenceListComponent'.
So how to fix this?那么如何解决这个问题呢?
Thank you谢谢
html: html:
<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">
<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)="gotoItem(i, entry.type)">
<td>{{ entry.date | date:"dd-MM-y" }}</td>
<td>{{ entry.name }}</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
js: js:
export class DossierCorrespondenceListComponent implements OnInit {
correspondenceEntries: DossierEntry[];
constructor() { }
ngOnInit() {
}
js: js:
export class DossierCorrespondenceComponent implements OnInit {
@Input()
allCorrespondence: Array<DossierEntry>;
@Input()
correspondenceEntries: Array<DossierEntry>;
@Input()
attachmentEntries: Array<DossierEntry>;
/* allCorrespondence$: Observable<DossierEntry>;
correspondenceEntries$: Observable<DossierEntry>;
attachmentEntries$: Observable<DossierEntry>; */
message = '';
emptyMessageCorrespondentie = 'Geen correspondentie.';
errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
correspondenceLoaded = false;
@Input() showingSingle = false;
single: DossierEntry;
constructor(
private healthAPIService: HealthAPIService,
private prevRouterService: PreviousRouteService,
private dossierService: DossierService
) {}
ngOnInit() {
this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, msg => (this.message = this.errorMessageConnection));
}
handleCorrespondenceLoad(result) {
if (result.length === 0) {
this.message = this.emptyMessageCorrespondentie;
return;
}
this.allCorrespondence = result;
this.attachmentEntries = [];
this.correspondenceEntries = [];
const groups = _.groupBy(result, 'type');
groups.correspondence.push(result);
groups.attachments.push(result);
}
gotoItem(index, type: string) {
this.showingSingle = true;
/* _.mapValues(type, function(group, key) {
return type === 'correspondence' ? _.groupBy(group, 'attachments') : group;
}); */
const groupData = _.groupBy(type, item => {
return _.get(item, 'correspondence', 'attachments');
});
switch (type) {
case 'correspondence': {
this.single = this.correspondenceEntries[index];
break;
}
case 'attachments': {
this.single = this.attachmentEntries[index];
break;
}
default: {
break;
}
}
this.showingSingle = true;
}
goBack(event) {
this.showingSingle = false;
}
}
YOu mean in here:你在这里的意思是:
<tbody class="dossier-tablebody">
<tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
<td>{{ entry.date | date:"dd-MM-y" }}</td>
<td>{{ entry.name }}</td>
</tr>
</tbody>
So this is the html of DossierCorospondenceComponent:所以这是 DossierCorospondenceComponent 的 html:
<app [noTopBar]="true">
<h2 class="dossier-page-header">Correspondentie</h2>
<p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>
<app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>
<app-dossier-correspondence-list ></app-dossier-correspondence-list>
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
</app>
So I have it like this:所以我有这样的:
export class DossierCorrespondenceListComponent implements OnInit {
correspondenceEntries: DossierEntry[];
@Input() showingSingle = false;
constructor() { }
ngOnInit() {
}
But what I have to put in here:但我必须在这里输入:
export class DossierCorrespondenceComponent implements OnInit {
@Input()
allCorrespondence: Array<DossierEntry>;
@Input()
correspondenceEntries: Array<DossierEntry>;
@Input()
attachmentEntries: Array<DossierEntry>;
/* allCorrespondence$: Observable<DossierEntry>;
correspondenceEntries$: Observable<DossierEntry>;
attachmentEntries$: Observable<DossierEntry>; */
message = '';
emptyMessageCorrespondentie = 'Geen correspondentie.';
errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
correspondenceLoaded = false;
@Input() showingSingle = false;
single: DossierEntry;
constructor(
private healthAPIService: HealthAPIService,
private prevRouterService: PreviousRouteService,
private dossierService: DossierService
) {}
Because now it is a double property因为现在是双重属性
You can see it said clear that showingSingle
not existed in DossierCorrespondenceListComponent
, you need to declare it inside DossierCorrespondenceListComponent
to use it.你可以看到它说清楚,
showingSingle
不存在DossierCorrespondenceListComponent
,你需要声明它里面DossierCorrespondenceListComponent
使用它。
If you can, show us your code for DossierCorrespondenceListComponent
and DossierCorrespondenceComponent
to see what you want to achieve is better.如果可以,请向我们展示您的
DossierCorrespondenceListComponent
和DossierCorrespondenceComponent
代码,看看您想要实现的更好。
You may see document of Angular Input for more infos how to do it Angular Input您可以查看 Angular Input 的文档以获取更多关于如何操作Angular Input 的信息
UPDATE 1更新 1
To be short: DCLC => DossierCorrespondenceListComponent
and DCC for DossierCorrespondenceComponent
简而言之:DCLC =>
DossierCorrespondenceListComponent
和 DCC for DossierCorrespondenceComponent
I see you want to display a list of DCC component, the property showingSingle
need to bypass a value from DCLC.我看到你想显示一个 DCC 组件的列表,属性
showingSingle
需要绕过一个来自 DCLC 的值。
In your ngFor
loop, add showingSingle
into the loop like this在你的
ngFor
循环中,像这样将showingSingle
添加到循环中
<div *ngFor="let c of list">
<DCC [showingSingle]="c"></DCC>
</div>
A side note: You should use English instead of French for the name of component, and you are working with Germans旁注:您应该使用英语而不是法语作为组件的名称,并且您正在与德国人合作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.