我问了一个类似的问题，但是不得不离开一个月，它已经消失了。
我有一个非常基本的RadListView，我正在使用RadListView中的（已加载的）侦听器进行填充。
<GridLayout orientation="vertical">
<RadListView [items]="reports" (loaded)="onListLoaded2($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
<StackLayout class="reportStackLayout" orientation="vertical">
<Label class="labelName blue_text bold_text list-group-item" [text]="item.report_name"></Label>
<GridLayout class="reportDetailsGridLayout" columns="*, *">
<Label row="0" col="0" horizontalAlignment="left" [class]="item.status_class" class="labelStatus" [text]="item.status_text" textWrap="true"></Label>
<Label row="0" col="1" horizontalAlignment="right" class="labelValue green_text bold_text" [text]="item.report_value" textWrap="true"></Label>
</GridLayout>
</StackLayout>
</StackLayout>
</ng-template>
</RadListView>
这是组件代码。
public onListLoaded2(args: ListViewEventData) {
this._reports = new ObservableArray<Report>();
this._reports.push(new Report(1, "Mileage Claims", 2, 332.45, "Submitted", "status_orange", "Travel expenses for October"));
this._reports.push(new Report(0, "October Expenses", 2, 32.45, "Approved", "status_green", "Expense claims for October"));
this.isLoading=false;
}
public get reports(): ObservableArray<Report> {
return this._reports;
}
这将按预期显示两个报告。
我希望能够点击其中一个并获取详细信息页面。但是，在任何地方点击都会产生错误页面，例如：
An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onItemClick failed
TypeError: listView._listViewAdapter.isGroupHeader is not a function
File: "file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js, line: 539, column: 62
StackTrace:
Frame: function:'onItemClick', file:'file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js', line: 539, column: 63
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)....etc.
我在RadListView上确实有一个itemTap侦听器，但出现了相同的错误页面。
有什么想法吗？ TIA
========================== 更新
@ogrodowiczp-我试过了，但是没有用。也许还有更广泛的问题？我使用简单的RadListView创建了另一个测试组件，并且在点击它时出现了相同的错误页面。也许我没有正确设置它？我已经卸载并重新安装了插件。
我的app.module.ts看起来像这样：
import { NativeScriptHttpModule } from "nativescript-angular/http";
...
...
imports: [
...
NativeScriptUIListViewModule,
...
],
...
和我的package.json：
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.myApp",
"tns-android": {
"version": "4.1.3"
}
},
"scripts": {
"lint": "tslint \"app/**/*.ts\""
},
"dependencies": {
"@angular/animations": "^6.0.9",
"@angular/common": "^6.0.9",
"@angular/compiler": "^6.0.9",
"@angular/core": "^6.0.9",
"@angular/forms": "^6.0.9",
"@angular/http": "^6.0.9",
"@angular/platform-browser": "^6.0.9",
"@angular/platform-browser-dynamic": "^6.0.9",
"@angular/router": "^6.0.9",
"nativescript-angular": "~6.0.0",
"nativescript-camera": "^4.0.2",
"nativescript-drop-down": "^4.0.1",
"nativescript-modal-datetimepicker": "^1.1.4",
"nativescript-theme-core": "~1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-listview": "^3.8.0",
"reflect-metadata": "~0.1.10",
"rxjs": "~6.1.0",
"tns-core-modules": "^4.2.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular-devkit/core": "~0.6.3",
"@angular/compiler-cli": "^6.0.9",
"@ngtools/webpack": "~6.0.3",
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"clean-webpack-plugin": "~0.1.19",
"codelyzer": "~4.3.0",
"copy-webpack-plugin": "~4.5.1",
"css-loader": "~0.28.11",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"nativescript-dev-sass": "~1.6.0",
"nativescript-dev-typescript": "^0.7.3",
"nativescript-dev-webpack": "~0.12.0",
"nativescript-worker-loader": "~0.9.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.3.0",
"sass-loader": "~7.0.1",
"tslint": "~5.10.0",
"typescript": "~2.7.2",
"uglifyjs-webpack-plugin": "~1.2.5",
"webpack": "~4.6.0",
"webpack-bundle-analyzer": "~2.13.0",
"webpack-cli": "~2.1.3",
"webpack-sources": "~1.1.0"
}
}
谢谢。
========================== 更新2018-11-13 15:01
@Narendra Mongiya我已经添加了此onItemTap简单函数，但是当我点击RadListView时仍然出现错误页面。没有console.log，也没有警报生成。
模板：
<RadListView #optionsListView selectionBehavior="Press" (loaded)="onListLoaded()" [items]="reports" (itemTap)="onItemTap($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
<StackLayout class="reportStackLayout" orientation="vertical">
<Label class="labelName blue_text bold_text list-group-item" [text]="item.report_name"></Label>
<GridLayout class="reportDetailsGridLayout" columns="*, *">
<Label row="0" col="0" horizontalAlignment="left" [class]="item.status_class" class="labelStatus" [text]="item.status_text" textWrap="true"></Label>
<Label row="0" col="1" horizontalAlignment="right" class="labelValue green_text bold_text" [text]="item.report_value" textWrap="true"></Label>
</GridLayout>
</StackLayout>
</StackLayout>
</ng-template>
</RadListView>
onItemTap在组件中：
public onItemTap(){
console.log("onItemTap called");
alert("ItemTap event");
}
有什么想法吗？谢谢。
=========================更新2018-11-15 17:31
另一个更简单的RadListView，它显示书籍列表：
组件：
public getBooks(args: ListViewEventData) {
this._books = new ObservableArray<Book>();
for (let i = 0; i < 10; i++) {
this._books.push(new Book("The Adventures of Tom Sawyer", "Mark Twain"));
}
this.isLoading=false;
}
public get books(): ObservableArray<Book> {
return this._books;
}
和模板：
<RadListView [items]="books" (loaded)="getBooks($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
<StackLayout class="reportStackLayout" orientation="vertical">
<Label class="labelName blue_text bold_text list-group-item" [text]="item.title"></Label>
<GridLayout class="reportDetailsGridLayout" columns="*, *">
<Label row="0" col="0" horizontalAlignment="left" [class]="item.author" class="labelStatus" [text]="item.author" textWrap="true"></Label>
</GridLayout>
</StackLayout>
</StackLayout>
</ng-template>
点击列表会将我带到相同的错误屏幕：
An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onItemClick failed
TypeError: listView._listViewAdapter.isGroupHeader is not a function
File: "file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js, line: 539, column: 62
StackTrace:
Frame: function:'onItemClick', file:'file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js', line: 539, column: 63
at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)....etc.
关于它可能是什么，我不知所措。再简单不过了。