Ошибка в ModalDialogParams

У меня есть серьезная проблема, бросив модальный формуляр в NativeScript с одной сдержись в Угловом.

Действительно не, потому что ошибка, я комментирую вам то, что он говорит мне во время бросания этого:

ERROR Error: Uncaught (in promise): Error: Modal content has more than one root view.
JS: Error: Modal content has more than one root view.

Он как будто он бросал два манер одновременно?.

Я перемещаю вас код, где бросается модальный:

 onLogin()
{
    if(this.loading)
        return;

    this.loading=true;
    let options: ModalDialogOptions = {
        viewContainerRef: this.vcRef,
        context:null,
        fullscreen: false
    };
    console.log("Vamos a entrar en login");
    this._modalService.showModal(ViewLogin, options)
        .then((userResult: User) => {
            if(userResult!=null)
                {
                    console.log("ENTRA el user = Object." + userResult.nombre);
                    this.usuario=userResult;
                    this.res["login"]=userResult;
                    app.setResources(this.res);
                }
                console.log("ENTRA en el USER = NULLLLL");
                this.loading=false;
        }).catch((error)=>{this.loading=false; alert(error);});
}

И сейчас, я перемещаю вас ViewLogin;

import { Component, OnInit } from "@angular/core";
import { User } from "../../Model/User/user";
import {UserService} from "../../Model/User/user.service"
import { Page } from "tns-core-modules/ui/page";
import aplicacion = require("tns-core-modules/application");
import aplicacionSet=require("tns-core-modules/application-settings");
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { SelectedIndexChangedEventData } from "nativescript-drop-down";


@Component({
    selector: "login",
    providers: [UserService],
    templateUrl: "./modal/login/login.html",
    styleUrls: ["./modal/login/login-common.css"]
})

export class ViewLogin implements OnInit {
user: User;
estadoLog="";
clave="";

loading=false;
public selectedIndex=0;
public dependientes: Array<string>=[];


constructor(
    private params:ModalDialogParams,
    private userService:UserService, 
    private page:Page)
{
    console.log("entrando en login");
    this.user=new User(null);
    this.user.usuario="";
    this.user.clave="";
    this.userService.listar().subscribe(
    (res:Array<User>)=>{
         res.forEach(element => {
             this.dependientes.push(element.usuario);    
         });
         this.selectedIndex=0;
         console.log("ADENTRO DE LA FUNCION SUBSCRIBE ----- " + res.length); 
        }, 
         (error)=>{
         console.log("Error al hacer LOGIN: " + error);
     });

     this.page.on("unloaded", () => {
         this.params.closeCallback(null);
         });
         console.log("DESPUES DEL page.on");
}

public onchange(args: SelectedIndexChangedEventData) {
    console.log('El usuario selecionado es ' + this.dependientes[args.newIndex] + " new-> " + args.newIndex + " select-> " + this.selectedIndex);
    this.user.usuario=this.dependientes[args.newIndex];
}

teclado(numero:string)
{
    if(numero=='back')
        this.user.clave=this.user.clave.substring(0,this.user.clave.length-1);
    else
        this.user.clave+=numero;
    this.clave= Array(this.user.clave.length+1).join("*") ;
}

ngOnInit()
{

    this.page.actionBarHidden=true;
    if(aplicacionSet.hasKey("usuario"))
        this.user.usuario=aplicacionSet.getString("usuario");

}

summit(){ 
    if(this.loading)
        return;
    this.loading=true;
    this.estadoLog="";
    var res=aplicacion.getResources();
    this.userService.login(this.dependientes[this.selectedIndex],this.user.clave).subscribe(
        (resultado:User)=>
                {
                    if(resultado==null)
                        {
                            console.log("Login incorrecto: " + resultado);
                            this.estadoLog="Login incorrecto"
                            res["login"]=null;
                            aplicacion.setResources(res);
                            this.loading=false;
                            return false;
                        }
                    else
                        {
                            this.estadoLog="Login correcto";   
                            res["login"]=resultado;

                            aplicacion.setResources(res);
                            aplicacionSet.setString("usuario",this.user.usuario);
                            console.log("lo hemos logrado: " + resultado.nombre);
                            console.log("login correcto");
                            this.params.closeCallback(resultado);
                            this.loading=false;
                            return true;
                        }
                },
        (error)=>
                {
                    console.log("No ha hecho login: " + error);
                    this.estadoLog = "Login incorrecto";
                    res["login"]=null;
                    aplicacion.setResources(res);
                    this.loading=false;
                    return false;
                }
    );

}

volver()
{
    this.params.closeCallback(null);
}
}

userService просто он делает консультацию в сервер и возвращает пользователи. Это приносит пользу. но во время загружения всего. Появляется следующая ошибка, прокомментированная уже наверху. Более конкретно:

JS: ERROR Error: Uncaught (in promise): Error: Modal content has more than 

one root view.
JS: Error: Modal content has more than one root view.
JS: at `file:///data/data/org.adealoxica.picking/files/app/tns_modules/nativescript-angular/directives/dialogs.js:99:23 [angular]`
JS: at Object.onInvoke `(file:///data/data/org.adealoxica.picking/files/app/tns_modules/@angular/core/bundles/core.umd.js:17343:37) [angular]`
JS: at `file:///data/data/org.adealoxica.picking/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:883:34 [angular]`
JS: at Object.onInvokeTask `(file:///data/data/org.adealoxica.picking/files/app/tns_modules/@angular/core/bundles/core.umd.js:17334:37) [angular]`
JS: at drainMicroTaskQueue `(file:///data/data/org.adealoxica.picking/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:595:35) [angular]`
JS: at ZoneTask.invokeTask `(file:///data/data/org.adealoxica.picking/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:500:21) [angular]`
JS:    ...

И он не делает больше ничего... остается замороженным приложение.

В этой части вы можете видеть сдержись HTML:

<StackLayout class="todoStack">
<Image src="~/images/logo_LTP.png" class="ImagenEmpresa"></Image>

<StackLayout orientation="horizontal" class="LabelsLoginStack" >
    <Label text="Usuario:" class="labelLogin" ></Label>
    <DropDown #dd
          [items]="dependientes"
          [(ngModel)]="selectedIndex"
          (selectedIndexChanged)="onchange($event)"  class="m-l-10 ">`</DropDown>`
</StackLayout>

<StackLayout orientation="horizontal" marginTop="15">
    <Label text="Pin:" class="labelLogin"></Label>
    <TextField hint="Pin" secure="true" 
     [(ngModel)]="clave" editable="false" class="m-l-15" ></TextField>-
</StackLayout>

<GridLayout rows="*, *, *, *" columns="*, *, *" height="39%" >
    <Button text="1" class="colorButton" (tap)="teclado('1')" row="0" `col="0"></Button>`
    <Button text="2" class="colorButton" (tap)="teclado('2')" row="0" `col="1"></Button>`
    <Button text="3" class="colorButton" (tap)="teclado('3')" row="0" `col="2"></Button>`
    <Button text="4" class="colorButton" (tap)="teclado('4')" row="1" `col="0"></Button>`
    <Button text="5" class="colorButton" (tap)="teclado('5')" row="1" `col="1"></Button>`
    <Button text="6" class="colorButton" (tap)="teclado('6')" row="1" `col="2"></Button>`
    <Button text="7" class="colorButton" (tap)="teclado('7')" row="2" `col="0"></Button>`
    <Button text="8" class="colorButton" (tap)="teclado('8')" row="2" `col="1"></Button>`
    <Button text="9" class="colorButton" (tap)="teclado('9')" row="2" `col="2"></Button>`
    <Button text="0" class="colorButton" (tap)="teclado('0')" row="3" `col="0" colSpan="2"></Button>`
    <Button text="Back" class="colorButton" (tap)="teclado('back')" row="3" `col="3"></Button>`
</GridLayout>
<Button text="Iniciar Sesion" class="submit-button 
 (tap)="summit()">`</Button>`  
<Button 
text="Volver" class="back-button" (tap)="volver()"></Button>
</StackLayout>
<ActivityIndicator [busy]="loading" row="0" rowspan="2" colSpan="2" [visibility]="loading?'visible':'collapse'" class="activity-indicator"></ActivityIndicator>
0
задан 21.03.2019, 10:14
1 ответ

Видя сдержись и исходный код из компонента Modal; кажется, что ты не можешь renderizar более одного составляющего сына одновременно, и ты сдержись renderiza StackLayout и такие ActivityIndicator как братья, а именно, у Modal есть два ребенка в твоем случае.

soluciГіn изюм, из-за того, что каждые ты группируй, сдержись внутри компонента верхней команды, в серьезном Вебе простой div, в NativeScript serГ - во внутри другого StackLayout или FlexLayout, что лучше приспособилось к твоей необходимости.

0
ответ дан 02.12.2019, 05:22
  • 1
    Большое спасибо @llsanchez ¡ – Philip Yepes Gallego 21.03.2019, 13:33