NativeScript下拉插件Angular - 打开项目时出错

时间:2017-10-03 09:51:19

标签: nativescript

我正在尝试在我的Nativescript-angular项目中使用nativescript下拉插件。

我尝试按照作者提到的示例项目中提到的相同步骤进行操作。但我收到以下错误。

  

JS:Drop Down打开了。 System.err:com.tns.NativeScriptException:   System.err:调用js方法getDropDownView失败System.err:   错误:java.lang.NullPointerException System.err:
  android.widget.TextView.setTextColor(TextView.java:3147)System.err:
  com.tns.Runtime.callJSMethodNative(Native Method)System.err:
  com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084)   System.err:com.tns.Runtime.callJSMethodImpl(Runtime.java:966)   System.err:com.tns.Runtime.callJSMethod(Runtime.java:953)   System.err:com.tns.Runtime.callJSMethod(Runtime.java:937)   System.err:com.tns.Runtime.callJSMethod(Runtime.java:929)

这是AppModule。我按照示例中的说明导入了下拉模块。

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptCommonModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        DropDownModule
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent,
        CustomerListComponent,
        CustomerDetailComponent,
        LoginComponent,
        HomeComponent,
        ProductListComponent,
        TestComponentClass
    ],
    providers: [
        ItemService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

我使用了相同的.ts类,在示例中对此进行了解释。

import { Component, OnInit } from '@angular/core';
import { SelectedIndexChangedEventData,ValueList } from "nativescript-drop-down";

@Component({
    selector: "ns-test-c",
    moduleId: module.id,
    templateUrl: "./test.component.html",
    // styleUrls: ["./test.component.css"]
})

export class TestComponentClass implements OnInit{

    public selectedIndex: number = null;
    public hint                  = "My Hint";
    public items: ValueList<string>;
    public cssClass: string      = "default";

    public ngOnInit() {
        this.items = new ValueList<string>();
        for ( let loop = 0; loop < 200; loop++ ) {
            this.items.push({
                value:   `I${loop}`,
                display: `Item ${loop}`,
            });
        }
    }

    public onchange(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}. New value is "${this.items.getValue(
            args.newIndex)}"`);
    }

    public onopen() {
        console.log("Drop Down opened.");
    }

    public onclose() {
        console.log("Drop Down closed.");
    }

    public changeStyles() {
        this.cssClass = "changed-styles";
    }
}

enter image description here

package.json:下面是已安装的软件包。

{
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
        "id": "org.nativescript.Kiwi",
        "tns-android": {
            "version": "3.2.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",
        "nativescript-angular": "~4.2.0",
        "nativescript-cardview": "^2.0.2",
        "nativescript-drop-down": "^3.1.3",
        "nativescript-floatingactionbutton": "^3.0.1",
        "nativescript-theme-core": "~1.0.2",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.4.2",
        "tns-core-modules": "^3.2.0",
        "zone.js": "~0.8.2"
    },
    "devDependencies": {
        "babel-traverse": "6.4.5",
        "babel-types": "6.4.5",
        "babylon": "6.4.5",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.5.0",
        "typescript": "~2.4.2"
    }
}

1 个答案:

答案 0 :(得分:1)

<DropDown #dd 
             color="blue"   <!- add this in...it work!!!! -->
             backroundColor="red" `enter code here`
             [items]="items" 
             [(ngModel)]="selectedIndex" 
             (selectedIndexChanged)="onchange($event)"
             (opened)="onopen()" 
             (closed)="onclose()" 
             row="0" 
             colSpan="2">
        </DropDown>