NativeScript/Angular - TypeError: Cannot read property 'Symbol' of undefined

Question

I've got a page component which has a FormBuilder form:

public adForm: FormGroup = this.fb.group({
  questions: this.fb.array([])
});

I pass questions down to a <questions> component:

<questions [questions]="adForm.get('questions')"></questions>

Which has a @Input() questions: FormArray; and uses this template:

<StackLayout orientation="vertical">
  <!-- If I comment out listview then it doesn't throw the error -->
  <ListView [items]="questions">
    <ng-template let-question="item">
      <Label [text]="question.model"></Label>
    </ng-template>
  </ListView>
  <Button class="btn btn-md btn-primary" text="Add question" (tap)="addQuestion()"></Button>
</StackLayout>

The problem I'm facing is that the ListView bit throws this error:

TypeError: Cannot read property 'Symbol' of undefined

If I comment that section out then it doesn't throw the error.

I know it has something to do with the questions form array, but I haven't been able to figure out what. It is defined so it shouldn't be an issue having to do with something getting undefined instead of an empty array..

Note that this error is being thrown directly on component init. I've logged questions in the ngOnInit and it's not undefined.

What am I doing wrong?

briosheje · Accepted Answer · 2017-11-08 15:48:19Z

Just to add something to the boilerplate, I was experiencing this issue aswell with an even easier list, though the component I'm using is telerik's RadListView, which is still based on the core ListView of nativescript.

Relevant HTML was:

   <GridLayout tkExampleTitle tkToggleNavButton>
        <RadListView class="list-group" ng-if="!isLoading" [items]="getAsyncList">
            <ng-template tkListItemTemplate let-item="item">
                <StackLayout class="list-group-item" orientation="vertical">
                    <Label class="list-group-item-heading" [text]="item.name"></Label>
                </StackLayout>
            </ng-template>
        </RadListView>
    </GridLayout>

I was experiencing this error aswell, though from the console it was not that easy to detect the issue:

JS: ERROR TypeError: Cannot read property 'Symbol' of undefined
JS: ERROR CONTEXT [object Object]

So, after running like a mad dude for about 30 minutes, I've figured out that the issue was significantly easier than what I was expecting.

The items params was supposed to be the result of a getter, but I did, instead, defined a function with the same name in my component:

public getAsyncList() {
  return this.ListViewCollection;
}

So it was probably referencing the function to the list instead of a getter, hence I had to change it to:

public get getAsyncList() {
  return this.ListViewCollection;
}

(note the get).

Kind of hard to track down the problem but hey, it was my fault anyway :P.

Chrillewoodz · Accepted Answer · 2017-04-21 19:18:51Z

1

I completely forgot that if I pass down a form array I don't actually get the raw value which is the array.. So in the ListView I either have to do questions.value or questions.controls in order to loop them.

I hope this helps someone else in the future.

answered Apr 21, 2017 at 19:18

Chrillewoodz

28.4k23 gold badges102 silver badges189 bronze badges

2 Comments

Bart van den Burg Over a year ago

thanks! After reading this I checked to see if i was actually looping over an array, but the array was actually hidden one level deeper

Chrillewoodz Over a year ago

@BartvandenBurg Glad it helped you :)

Collectives™ on Stack Overflow

NativeScript/Angular - TypeError: Cannot read property 'Symbol' of undefined

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related