RadListView Telerik UI“无法读取未定义的属性‘setLayoutParams’”

Posted 2023-04-13

【中文标题】RadListView Telerik UI“无法读取未定义的属性‘setLayoutParams’”

【英文标题】：RadListView Telerik UI "Cannot read property 'setLayoutParams' of undefined"

【发布时间】：2018-02-28 00:00:38

【问题描述】：

在尝试使用 TelerikUI 中的 RadListView 时，我遇到了一个错误，我无法挂断。根据角度样本，我

在我的 submodule.ts 文件中导入模块

import  NativeScriptUIListViewModule  from "nativescript-telerik-ui/listview/angular";

和

@NgModule(


 imports: [
    NativeScriptModule,
    NativeScriptI18nModule,
    NativeScriptRouterModule,
    subRouting,
    NativeScriptUIListViewModule,
  ],
  declarations: [
    ListPageComponent,
  ],
  exports: [
  ]
)
export class SubModule 

在 ListPageComponent 中创建了数据对象定义

class DataItem 
    constructor(public id: string, public type: string)  

并编写了我的组件类

@Component(
    selector: "list",
    moduleId: module.id,
    templateUrl: "list.page.html",
    styleUrls: ["list.page.css"]
)
export class ListPageComponent implements OnInit 

    public _dataItems: DataItem[] = [
        id: "1", type: "A",
        id: "2", type: "A",
        id: "3", type: "A"
    ];
    get dataItems(): ObservableArray<DataItem> 
        return new ObservableArray(this._dataItems);
    


    constructor(
        private _pageRoute: PageRoute,
        private _routerExtensions: RouterExtensions,
        private _page: Page
    )
    

    ngOnInit(): void 
            

最后，尝试按照定义进行渲染

<GridLayout columns="*" rows="*">
    <RadListView [items]="dataItems" col="0" row="1">
        <ng-template tkListItemTemplate let-item="item">
            <GridLayout columns="auto" rows="auto">
                <Label class="descriptionLabel" [text]="item.type" col="0" row="0"></Label>
            </GridLayout>
        </ng-template>        
    </RadListView>
</GridLayout>

该示例适用于基本列表视图，但切换到 RadListView 会引发

An uncaught Exception occured on "main" thread. com.tns.NativeScriptException:
Calling js method onCreateViewHolder failed

Type Error: Cannot read property 'setLayoutParams' of undefined File: "file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-telerik-ui/listview/listview.js, line: 102 column: 42

StackTrace:
Frame: function:'ListViewAdapter.onCreateViewHolder', file"file:///data/data/org.nativescript.myapp/files/app/tns_modules/nativescript-telerik-ui/listview/listview.js, line: 102 column: 43

at com.tns.Runtime.callJSMethodNative (Native Method) [...]

在我的安卓模拟器上（还没有机会在 ios 上测试）

看来，我在 RadListView 上做了一个基本的错误，尽管我与 Angular 应用程序的 nativescript-ui-samples 保持完全一致。

我的 package.json 摘录

"nativescript": 
        "id": "org.nativescript.myapp",
        "tns-android": 
            "version": "3.1.1"
        ,
        "tns-ios": 
            "version": "3.1.0"
        
    ,
    "dependencies": 
        "@angular/animations": "~4.2.0",
        "@angular/common": "~4.2.0",
        "@angular/compiler": "~4.2.0",
        "@angular/core": "~4.2.0",
        "@angular/forms": "~4.2.0",
        "@angular/http": "~4.2.0",
        "@angular/platform-browser": "~4.2.0",
        "@angular/router": "~4.2.0",
        "moment": "^2.18.1",
        "nativescript-angular": "~4.2.0",
        "nativescript-gif": "^2.0.0",
        "nativescript-i18n": "^0.2.2",
        "nativescript-telerik-ui": "^3.1.0",
        "nativescript-theme-core": "~1.0.4",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.4.2",
        "tns-core-modules": "~3.1.1",
        "zone.js": "~0.8.2"
    ,

非常感谢任何提示。

谢谢。

【参考方案1】：

您需要将所有内容更新到最新版本tns plugin update。还将android和ios版本更新到3.2.0

【讨论】：

相应地在 github 上找到了一个新帖子（仅几个小时前）：github.com/telerik/nativescript-ui-feedback/issues/293

这个答案也帮助我解决了我在使用 vanilla NS 时遇到的同样问题。