CODEWITHSUNDEEP
angulartypescript
Edward Muldrew
Edward Muldrew

Reputation: 273

How to define an array of objects, array of objects | Angular 2

I keep getting an undefined type error of "ERROR TypeError: Cannot read property 'length' of undefined". In my classes I have an object of array which has another object of array. Basically I have a class which looks something like this: 

export class ICase {
  shareCaseReason?: string;
  caseDetails?: ICasedeit;
  involvedPersonsAndOrganisations?: IInvolved;
  policeOfficers?: IPolice[];
  incidents?: IIncident[];
  offences?: IOffence[];
  suspect?: ISuspectDetails[];
  witnessStatements?: IStatements[];
  interviewNotes?: IIncident[];
  notebookEntries?: INotebook;
  victims?: IVictim[];
  witnesses?: IWitness[];
  physicalEvidence?: IEvidence[];
  otherDocumentaryEvidence?: IDocEvidence[];
}

I want to display a property from the ISuspectDetails object array. This class looks like this: 

export class ISuspectDetails {
  ageRange: string;
  juvenile: IJuvenile;
  timeincustody: ITimeInCustody;
  particularNeeds: IParticularNeeds;
  complaints: IComplaint[];
  principalEvidenceTypes: IEvidenceTypes;
  motivationTypes: IMotivationTypes;
  bailRecords: IBailRecords; 

  constructor() {
    this.complaints = [];
  };
}

I want to display in my component the length of ISuspectDetails complaints array on an ngFor. My template looks like this: 

<div class="container-fluid scrollable-grid"  *ngIf='template && template.shareCase && template.shareCase.case && template.shareCase.case.suspects'>
  <div class="row gridData" *ngFor="let suspect of template.shareCase.case.suspects">
    <div class="col-2"> {{suspect?.chargeDate}} </div>
    <div class="col-1"> {{suspect?.complaint?.length}} </div>
  </div>
</div>

I have defined the suspects array like this in my component and I have also defined the complaints array in the constructor of ISuspectDetails. I am unsure of how to define this array and then display the length of the complaints array.

 this.template.shareCase.case.suspect = [];

All help would be greatly appreciated! Just starting out in Angular and I am getting the hang of most things but I can't seem to find the solution for this particular problem anywhere!

Upvotes: 0

Views: 1094

Answers (1)

FAISAL
FAISAL

Reputation: 34673

You have a typo in your html, complaint instead of complaints. Change to:

{{suspect?.complaints?.length}}

Upvotes: 2

Related Questions