NativeScript/Angular — TypeError: невозможно прочитать свойство «Символ» неопределенного

У меня есть компонент страницы, который имеет форму FormBuilder:

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

Я передаю questions компоненту <questions>:

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

Который имеет @Input() questions: FormArray; и использует этот шаблон:

<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>

Проблема, с которой я столкнулся, заключается в том, что бит ListView выдает эту ошибку:

TypeError: Cannot read property 'Symbol' of undefined

Если я прокомментирую этот раздел, он не выдаст ошибку.

Я знаю, что это как-то связано с массивом формы questions, но я не смог понять, что именно. Он определен, поэтому не должно быть проблем с получением undefined вместо пустого массива.

Обратите внимание, что эта ошибка возникает непосредственно при инициализации компонента. Я зарегистрировал questions в ngOnInit, и это не неопределенно.

Что я делаю не так?


nativescript angular nativescript-angular angular2-formbuilder
person Chrillewoodz    schedule 21.04.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Просто чтобы добавить кое-что к шаблону, я также столкнулся с этой проблемой с еще более простым списком, хотя компонент, который я использую, — это RadListView от Telerik, который по-прежнему основан на ядре ListView нативного сценария.

Соответствующий HTML был:

   <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>

Я также столкнулся с этой ошибкой, хотя из консоли было не так просто обнаружить проблему:

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

Итак, побегав как сумасшедший около 30 минут, я понял, что проблема была значительно проще, чем я ожидал.

Параметры items должны были быть результатом геттера, но вместо этого я определил функцию с тем же именем в своем компоненте:

public getAsyncList() {
  return this.ListViewCollection;
}

Так что, вероятно, это была ссылка на функцию в списке вместо геттера, поэтому мне пришлось изменить ее на:

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

(обратите внимание на get).

Довольно сложно отследить проблему, но эй, это все равно была моя вина: P.

person briosheje    schedule 08.11.2017

arrow_upward
1
arrow_downward

Я совершенно забыл, что если я передаю массив формы, я на самом деле не получаю необработанное значение, которое является массивом. Поэтому в ListView мне нужно либо сделать questions.value, либо questions.controls, чтобы зациклить их.

Я надеюсь, что это поможет кому-то еще в будущем.

person Chrillewoodz    schedule 21.04.2017
comment
Благодарность! Прочитав это, я проверил, действительно ли я зацикливался на массиве, но на самом деле массив был скрыт на один уровень глубже. - person Bart van den Burg; 11.09.2017
comment
@BartvandenBurg Рад, что это помогло вам :) - person Chrillewoodz; 12.09.2017