![](/img/trans.png)
[英]Pinia store in Typescript Vue component gives error "Property 'testStore' does not exist on type 'CreateComponentPublicInstance'...."
[英]@input on component gives error: Property 'showingSingle' does not exist on type
所以我有一个 angular 8 应用程序。
我在组件 DossierCorrespondenceComponent 中有这个:
@Input() showingSingle = false;
这样我就可以在其他组件(DossierCorrespondenceListComponent)中使用它。 但如果我这样做:
<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">
然后我会得到这个错误:
Property 'showingSingle' does not exist on type 'DossierCorrespondenceListComponent'.
那么如何解决这个问题呢?
谢谢
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:
export class DossierCorrespondenceListComponent implements OnInit {
correspondenceEntries: DossierEntry[];
constructor() { }
ngOnInit() {
}
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;
}
}
你在这里的意思是:
<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>
所以这是 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>
所以我有这样的:
export class DossierCorrespondenceListComponent implements OnInit {
correspondenceEntries: DossierEntry[];
@Input() showingSingle = false;
constructor() { }
ngOnInit() {
}
但我必须在这里输入:
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
) {}
因为现在是双重属性
你可以看到它说清楚, showingSingle
不存在DossierCorrespondenceListComponent
,你需要声明它里面DossierCorrespondenceListComponent
使用它。
如果可以,请向我们展示您的DossierCorrespondenceListComponent
和DossierCorrespondenceComponent
代码,看看您想要实现的更好。
您可以查看 Angular Input 的文档以获取更多关于如何操作Angular Input 的信息
更新 1
简而言之:DCLC => DossierCorrespondenceListComponent
和 DCC for DossierCorrespondenceComponent
我看到你想显示一个 DCC 组件的列表,属性showingSingle
需要绕过一个来自 DCLC 的值。
在你的ngFor
循环中,像这样将showingSingle
添加到循环中
<div *ngFor="let c of list">
<DCC [showingSingle]="c"></DCC>
</div>
旁注:您应该使用英语而不是法语作为组件的名称,并且您正在与德国人合作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.