NativeScript/Angular - TypeError: Cannot read property 'Symbol' of undefined
NativeScript/Angular - TypeError: Cannot read property 'Symbol' of undefined
我有一个具有 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
而不是空数组有关的问题不应该是一个问题..
请注意,此错误是直接在组件初始化时抛出的。我在 ngOnInit
中记录了 questions
并且它不是未定义的。
我做错了什么?
我完全忘记了,如果我传递一个表单数组,我实际上并没有得到数组的原始值。所以在 ListView 中,我必须做 questions.value
或 questions.controls
为了循环它们。
我希望这对以后的其他人有所帮助。
只是为了向样板添加一些东西,我遇到了这个问题以及一个更简单的列表,尽管我使用的组件是 telerik 的 RadListView,它仍然基于 nativescript 的核心 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
参数应该是 getter 的结果,但我确实在我的组件中定义了一个具有相同名称的函数:
public getAsyncList() {
return this.ListViewCollection;
}
所以它可能将函数引用到列表而不是 getter,因此我不得不将其更改为:
public get getAsyncList() {
return this.ListViewCollection;
}
(注意 get
)。
有点难以找出问题所在,但是嘿,无论如何都是我的错:P.
我有一个具有 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
而不是空数组有关的问题不应该是一个问题..
请注意,此错误是直接在组件初始化时抛出的。我在 ngOnInit
中记录了 questions
并且它不是未定义的。
我做错了什么?
我完全忘记了,如果我传递一个表单数组,我实际上并没有得到数组的原始值。所以在 ListView 中,我必须做 questions.value
或 questions.controls
为了循环它们。
我希望这对以后的其他人有所帮助。
只是为了向样板添加一些东西,我遇到了这个问题以及一个更简单的列表,尽管我使用的组件是 telerik 的 RadListView,它仍然基于 nativescript 的核心 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
参数应该是 getter 的结果,但我确实在我的组件中定义了一个具有相同名称的函数:
public getAsyncList() {
return this.ListViewCollection;
}
所以它可能将函数引用到列表而不是 getter,因此我不得不将其更改为:
public get getAsyncList() {
return this.ListViewCollection;
}
(注意 get
)。
有点难以找出问题所在,但是嘿,无论如何都是我的错:P.