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

Question

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!

FAISAL · Accepted Answer · 2017-08-02 09:00:31Z

2

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

{{suspect?.complaints?.length}}

answered Aug 2, 2017 at 9:00

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edward Muldrew Over a year ago

Thank you so much! I feel quite silly now for not being able to see it!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related