我正在使用角度应用程序6。并且我想显示一个已上传文档的列表。有一个组件。但是该组件的属性未初始化。但是该怎么做？
我有这个组件：
export class DiplomaComponent extends AfwComponent implements OnInit {
resources: DiplomasResourcesModel;
private readonly apiDiploma: string = 'api/register/teachers/current/diploma';
readonly resourceKeys: DiplomasResourcesModel = DiplomasResourcesModel.keys;
readonly linkModifyDiploma = RoutesRegisterModel.pathnameMyRegisterRouteDiplomaEdit;
//private readonly apiDiploma: string = 'api/register/teachers/current/diploma';
//readonly resourceKeys = DiplomasWijzigenResourcesModel.keys;
protected readonly formName = FormNamesModel.diplomaForm;
//diplomaModel : DiplomaModel;
formModel: AfwFormService;
//documentList?: DocumentListModel;
@Input() readonly diplomaModel: DiplomaModel;
documentListCompoment: DocumentListComponent;
diplomaFormKeysModel: DiplomaFormKeysModel;
protected baseDocumentsUrl: string;
teacher: TeacherModel;
protected hasDocumentsInQueue: boolean;
id: number;
isSucceeded: boolean;
documentList?: DocumentListModel;
//private readonly http: any;
constructor(readonly textResourceService: TextResourceService,
readonly route: ActivatedRoute, private readonly https: AfwHttp,
private readonly multiFileUploadControlFactory: MultiFileUploadControlFactory,
private readonly formService: FormService,
) {
super(textResourceService, route);
//this.diplomaModel = diplomaModel;
}
ngOnInit() {
//showDocuments();
const defaultModel = diplomaFormModel(this.multiFileUploadControlFactory);
//this.diplomaService.getDiplomaDocumentList();
this.getDocumentsDetails().subscribe(d => {
const diplomasUpload = this.multiFileUploadControlFactory.createEmptyDefaultValues();
diplomasUpload.files = d.documents;
this.formModel = this.formService.createModel<DiplomaFormModel, DiplomasResourcesModel>(
defaultModel, { qualificationTerms: null, diplomasUpload }, this.resources
);
});
}
/* getDocumentDiploma() {
this.diplomaService.getDiplomaDocumentList();
} */
showDocuments(): boolean {
return this.diplomaModel.documents &&
this.diplomaModel.documents.hasDocuments() || !this.diplomaModel.documents.isSucceeded;
}
getDocumentsDetails = (): Observable<DocumentListModel> =>
this.https.get<DiplomaModel>(`${this.apiDiploma}/documents`).pipe(map((dip => dip.documents)))
}
这是html：
<ng-container>
<afw-lead resourceKey="diplomaVoegToeLabel" [text]="resources.diplomaVoegToeLabel"></afw-lead>
<afw-content-block [resources]="resources" [titleResourceKey]="resourceKeys.diplomasTitel" [editLink]="linkModifyDiploma"
[editLinkResourceKey]="resourceKeys.wijzigenLink">
<div class="readonly-block">
<p [textContent]="resources.diplomasLabel"></p>
</div>
<afw-document-list [emptyResourceKey]="resourceKeys.geenBestandenTekst"
[baseDocumentsUrl]="baseDocumentsUrl" [fieldValue]="documentList" [resources]="resources"
fieldResourceKeyPrefix="bijlagen" [getDocumentsDetails] = 'getDocumentsDetails'>
</afw-document-list>
</afw-content-block>
</ng-container>
但是我得到这个错误：
DocumentListComponent.html:1 ERROR TypeError: Cannot read property 'isSucceeded' of undefined
at Object.eval [as updateDirectives] (DocumentListComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
at checkAndUpdateView (core.js:21873)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21879)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21879)
这是组件DocumentListModel：
import { DocumentModel } from 'afw/models';
/**
* The model for documents that contains information about all the documents of the user
* and document store queue for particular case number.
*/
export class DocumentListModel {
/**
* Indicator of how many documents there are in the queue
*/
documentsInQueue?: number;
/**
* The actual documents
*/
documents: Array<DocumentModel>;
/**
* Whether the DMS succeeded
*/
isSucceeded: boolean;
/**
* Whether there is anything to display
*/
hasDocuments() {
return this.isSucceeded && this.documents && this.documents.length > 0 || this.documentsInQueue > 0;
}
/**
* Constructor
*/
constructor(item?: DocumentListModel) {
if (item) {
Object.assign(this, item);
}
}
}
那我要解决什么？
这是DiplomaModel组件：
import { DocumentListModel } from "afw/models";
export class DiplomaModel {
documents: DocumentListModel;
}
我的html看起来像这样：
我的类型文件脚本如下：
import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TextResourceService, AfwHttp } from 'afw/generic-services';
import { AfwComponent } from 'afw/ui-components';
import { DiplomasResourcesModel } from 'lr/models/src/resources/register-resources.model';
import { RoutesRegisterModel, FormNamesModel } from 'register-shared/models';
import { TeacherModel } from 'lr/models';
import { DiplomaFormKeysModel } from './models/diploma-form-keys.model';
import { DocumentListComponent } from 'afw/ui-components/src/document-list/document-list.component';
import { DocumentListModel } from 'afw/models';
import { AfwFormService, MultiFileUploadControlFactory, FormService } from 'afw/forms';
import { Observable } from 'rxjs';
import { DiplomaModel } from './models/diploma.model';
import { map } from 'rxjs/operators';
import { diplomaFormModel, DiplomaFormModel } from './models/diploma-form.model';
// import { DiplomaService } from 'register-shared/services';
@Component({
selector: 'register-diploma',
templateUrl: './diploma.component.html',
})
export class DiplomaComponent extends AfwComponent implements OnInit {
resources: DiplomasResourcesModel;
private readonly apiDiploma: string = 'api/register/teachers/current/diploma';
readonly resourceKeys: DiplomasResourcesModel = DiplomasResourcesModel.keys;
readonly linkModifyDiploma = RoutesRegisterModel.pathnameMyRegisterRouteDiplomaEdit;
readonly id: number;
//private readonly apiDiploma: string = 'api/register/teachers/current/diploma';
//readonly resourceKeys = DiplomasWijzigenResourcesModel.keys;
protected readonly formName = FormNamesModel.diplomaForm;
//diplomaModel : DiplomaModel;
formModel: AfwFormService;
//documentList?: DocumentListModel;
diplomaModel: DiplomaModel;
documentListCompoment: DocumentListComponent;
diplomaFormKeysModel: DiplomaFormKeysModel;
protected baseDocumentsUrl: string;
teacher: TeacherModel;
protected hasDocumentsInQueue: boolean;
isSucceeded: boolean;
documentList?: DocumentListModel;
//private readonly http: any;
constructor(readonly textResourceService: TextResourceService,
readonly route: ActivatedRoute, private readonly https: AfwHttp,
private readonly multiFileUploadControlFactory: MultiFileUploadControlFactory,
private readonly formService: FormService,
//private readonly diplomaService: DiplomaService
) {
super(textResourceService, route);
//this.diplomaModel = diplomaModel;
}
ngOnInit() {
//showDocuments();
const defaultModel = diplomaFormModel(this.multiFileUploadControlFactory);
//this.diplomaService.getDiplomaDocumentList();
this.getDocumentsDetails().subscribe(d => {
const diplomasUpload = this.multiFileUploadControlFactory.createEmptyDefaultValues();
diplomasUpload.files = d.documents;
this.formModel = this.formService.createModel<DiplomaFormModel, DiplomasResourcesModel>(
defaultModel, { qualificationTerms: null, diplomasUpload }, this.resources
);
});
}
/* getDocumentDiploma() {
this.diplomaService.getDiplomaDocumentList();
} */
showDocuments(): boolean { return this.diplomaModel.documents && (this.diplomaModel.documents.hasDocuments() || !this.diplomaModel.documents.isSucceeded); }
getDocumentsDetails = (): Observable<DocumentListModel> =>
this.https.get<DiplomaModel>(`${this.apiDiploma}/documents`).pipe(map((dip => dip.documents)))
//this.https.get<DiplomaModel>(`${this.apiDiploma}/documents`).pipe(map((dip => dip.documents)))
}
和html文件：
<afw-content-block [resources]="resources" [titleResourceKey]="resourceKeys.diplomasTitel" [editLink]="linkModifyDiploma"
[editLinkResourceKey]="resourceKeys.wijzigenLink">
<div class="readonly-block">
<p [textContent]="resources.diplomasLabel"></p>
</div>
<afw-document-list [resources]="resources" fieldResourceKeyPrefix="bijlagen"
[fieldValue]="diplomaModel?.documents"
[baseDocumentsUrl]="baseDocumentsUrl" [emptyResourceKey]="resourceKeys.geenBestandenTekst"
[getDocumentsDetails]='getDocumentsDetails()'>
</afw-document-list>
</afw-content-block>
答案 0 :(得分：0)
showDocuments(): boolean { return this.diplomaModel.documents && this.diplomaModel.documents.hasDocuments() || !this.diplomaModel.documents.isSucceeded; }
你的意思是：
showDocuments(): boolean { return this.diplomaModel.documents && (this.diplomaModel.documents.hasDocuments() || !this.diplomaModel.documents.map(d => d.isSucceeded).reduce((p, n) => p && n, true)); }
??
因为文档是对象数组，而不是单个对象