下拉列表不是有效的视图实例Angular + Nativescript

如何解决下拉列表不是有效的视图实例Angular + Nativescript

我正在尝试通过使用nativescript下拉插件在我的nativescript角度应用程序中创建一个下拉列表。运行应用程序时出现错误“ Dropdown（1）不是有效的视图实例”

从“ nativescript-drop-down / angular”导入{DropDownModule};

.html文件

 <GridLayout rows="auto,auto,*"
                                        columns="auto,*" (tap)="openVersionDropdown()"    >
    
                                <DropDown  #dd  backgroundColor="red" [items]="itemsVersion"
                                          [selectedIndex]="selectedVersionIndex" (opened)="onopen()"
                                           (closed)="onclose()" (selectedIndexChange)="onVersionChange($event)" row="0" colSpan="2"></DropDown>
    
                                <Label text="Selected Index:"
                                       row="1"
                                       col="0"
                                       fontSize="18"
                                       verticalAlignment="bottom"></Label>
                                <Label [text]="selectedVersionIndex"
                                           row="1"
                                           col="1"></Label>

ts文件

import {DropDown,SelectedIndexChangedEventData,ValueList} from "nativescript-drop-down";
    .... 
public itemsVersion: ValueList<string>;
selectedVersionIndex : number;

     public onopen() {
            console.log("Drop Down opened.");
        }
    
        public onclose() {
            console.log("Drop Down closed.");
        }
    
        public changeStyles() {
            this.cssClass = "changed-styles";
        }
    
    
        openVersionDropdown(){
            let dropdown = <DropDown>this.page.getViewById('ddVersion');
            dropdown.open();
        }
        onVersionChange(args: SelectedIndexChangedEventData){
            console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}. `);
        }
        ngOnInit(): void {
            this.itemsVersion = new ValueList<string>();
            for (let loop = 0; loop < 5; loop++) {
                this.itemsVersion.push({
                    value: `${loop}`,display:  "Item "+ loop,});
            }
     }

解决方法

尝试此操作以在应用程序中添加下拉菜单： 1.demo.module.ts：-

 import { NgModule,NO_ERRORS_SCHEMA } from "@angular/core";
 import { DemoComponent } from "./demo.component";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { DropDownModule } from "nativescript-drop-down/angular";

 @NgModule({
  imports: [
    NativeScriptCommonModule,NativeScriptFormsModule,DropDownModule,],declarations: [
    DemoComponent
  ],providers: [
  ],schemas: [
    NO_ERRORS_SCHEMA
  ]
 })
 export class DemoModule { }

2.demo.component.html：-

<GridLayout row="0" rows="auto" col="0" columns="*,auto"
                                        class="demo-container" ios:style="padding:8">
                                        <DropDown row="0" col="0" #ddlInitial [items]="initialList"
                                            [selectedIndex]="initialSelectedIndex" ios:style="padding:8"
                                            (selectedIndexChanged)="onInitialChange($event)"
                                            hint="Initial"
                                            class="eloha-font-semibold demo-drop-input">
                                        </DropDown>
                                        <Label row="0" col="1" text="&#xf13a;" class="fa set-icon-color"
                                            [ngClass]="{'font-size-lg': !isTablet,'font-size-lg-tablet': isTablet}"
                                            verticalAlignment="middle" android:style="padding-right: 10"></Label>
                                    </GridLayout>

3.demo.component.ts：-

import { Component,OnInit,NgZone,ChangeDetectorRef,ChangeDetectionStrategy,ViewChild,AfterViewInit,ElementRef } from "@angular/core";
import * as frameModule from "tns-core-modules/ui/frame";
import { isIOS,device } from "tns-core-modules/platform";
import * as  orientation from 'nativescript-orientation';
import { RouterExtensions } from "nativescript-angular/router";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { DeviceType } from "tns-core-modules/ui/enums";
import { ActivatedRoute } from "@angular/router";
import { SelectedIndexChangedEventData,ValueList } from "nativescript-drop-down";
import { DatePipe } from "@angular/common";

@Component({
selector: "Demo",moduleId: module.id,templateUrl: "./demo.component.html",styleUrls: ['./demo.component.css'],providers: [DatePipe]
})
export class AddFamilyComponent implements OnInit {

public isTablet: boolean = false;

//Value 
public initialList: ValueList<string>;

//Get dropDown selected index
public initialSelectedIndex = 0;

constructor(private zone: NgZone,private _ref: ChangeDetectorRef,private route: ActivatedRoute,private datePipe: DatePipe,private routerExtensions: RouterExtensions) {
    this.isIos = isIOS;
    this.pageIndex = "2";
}

ngOnInit(): void {
    orientation.setOrientation("portrait");
    orientation.disableRotation();

}

ngAfterViewInit(): void {
    if (isIOS) {
        const controller = frameModule.topmost().ios.controller;
        // get the view controller navigation item
        const navigationItem = controller.visibleViewController.navigationItem;
        // hide back button
        navigationItem.setHidesBackButtonAnimated(true,false);
    }
}

//Add initial value
getInitialValueList() {
    let initialSource = new ValueList<string>([
        { value: "Mr",display: "Mr" },{ value: "Mrs",display: "Mrs" },{ value: "Miss",display: "Miss" }
    ]);
    this.initialList = initialSource;
}

//Change initial selection value
onInitialChange(args: SelectedIndexChangedEventData) {
    let initialValue = this.initialList.getValue(args.newIndex);
}

}

4。 demo.component.css：-

.demo-drop-input {
 font-size: 17;
 padding-top: 5;
 padding-left: 5;
 padding-right: 0;
 padding-bottom: 5;
 border-radius: 30;
 background: #fffff;
}