Type Error, Angular 5: Cannot read property 'length'

Question

Still I got below error: Type Error Cannot read property 'length', is connected to html line 9:

Test

</mat-header-cell>
          <mat-cell fxFlex="40%" mat-cell *matCellDef="let row; let element"
  line 9:    [ngStyle]="checkIfTrue(element.name) && {'background-color':'lightgreen'}">
          <mat-checkbox [ngStyle]="checkIfTrue(element.name) && {'background-color':'white'}" (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
          </mat-checkbox>
          </mat-cell>
  </ng-container>

And checkIfTrue from component:

   checkIfTrue(name?: string) {
    if (name) {
        if (!this.isLoadingArray[this.groupName]) {
            for (const team of this.teams) {
                if (name === team.teamPromotion1 || name === team.teamPromotion2) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    } else {
        return false;
    }

}

I think, all the values were initialized.

element.name is undefined in template. change it to element?name — Lia
– Lia, Commented Jun 8, 2018 at 18:58
@ConnorsFan suggested trick should work and your error should not be same. OR you can try name?.length I am not sure that works in the .ts or not — Rohit.007
– Rohit.007, Commented Jun 8, 2018 at 18:58
You have not assigned any value to <mat-cell fxFlex="40%" mat-cell *matCellDef="let row; let element" element — Rohit.007
– Rohit.007, Commented Jun 8, 2018 at 19:00
element is assigned just above and your code is retrieving the properties from blank element OR you can just write a console.log(name) just above the if (name.length > 0) { statement then you will get what value is passed into it. — Rohit.007
– Rohit.007, Commented Jun 8, 2018 at 19:13

Lia · Accepted Answer · 2018-06-08 19:08:21Z

1

because element.name is not defined in html causes error and it's not work even if you change it to element?.name, you can do something like this:

<mat-cell *ngIf="element.name" fxFlex="40%" mat-cell *matCellDef="let row; let element"
[ngStyle]="checkIfTrue(element.name) && {'background-color':'lightgreen'}">

answered Jun 8, 2018 at 19:08

Lia

12k3 gold badges36 silver badges53 bronze badges

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

12 Comments

baao Over a year ago

The error comes from checkIfTrue(), namely because element.name is undefined which doesn't have a length property

baao Over a year ago

Yes. If you don't pass something you are checking for undefined.length. undefined doesn't have a length property. Check if (name && name.length) @profiler

Lia Over a year ago

@baao i know but even if i change it to element.?name it causes error because it's methods parameter.

baao Over a year ago

The html is not connected to this error @fatemefazli

Lia Over a year ago

yes as @baao said if you check if (name && name.length) in your function it prevent error.

|

Collectives™ on Stack Overflow

Type Error, Angular 5: Cannot read property 'length'

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related