StackLayout - addChild ist keine Funktion

Question

Dies geschieht in einer NativeScript + Angular-Anwendung.

Ich versuche, dynamisch Etiketten in einer StackLayout Ansicht hinzuzufügen, wobei das Verfahren StackLayout.addChild verwenden, da die documentation sagt.

Meine Ansicht sieht wie folgt aus:

<MainActionBar > </MainActionBar> 
    <ScrollView orientation="vertical" #scroll> 

    <StackLayout class="full-page settings-list pad-bottom" #stack > 
      <Label class="text-color" text="Cadastro genérico"></Label> 
    </StackLayout> 

    <StackLayout class="full-page settings-list pad-bottom"> 
      <Button class="btn btn-primary btn-active" id="createInput" text="Cria input" (tap)="criaInput()"></Button> 
      <Button class="btn btn-primary btn-active" id="createSelect" text="Cria select" (tap)="criaSelect()"></Button> 
    </StackLayout> 

</ScrollView> 

Typoskript Klasse:

import { FormControl, Validators } from '@angular/forms'; 
import { 
    ViewChild, ChangeDetectorRef, OnInit, AfterViewInit, 
    ChangeDetectionStrategy, Component 
} from '@angular/core'; 

import {NavigationEnd} from '@angular/router'; 

import sideDrawerModule = require('nativescript-telerik-ui/sidedrawer'); 
import {RadSideDrawerComponent} from "nativescript-telerik-ui/sidedrawer/angular"; 
import {DrawerTransitionBase, PushTransition} from "nativescript-telerik-ui/sidedrawer"; 
import {Page} from "ui/page"; 
import {Frame} from "ui/frame"; 
import {RouterExtensions} from "nativescript-angular"; 
import {DrawerService} from "../../services/drawer.service"; 
import {ActionBarUtil} from "../../utils/actionbar.util"; 
import {Observable} from "data/observable"; 

import { Label } from 'ui/label'; 

import { StackLayout } from 'ui/layouts/stack-layout'; 


@Component({ 
    moduleId: module.id, 
    selector: 'cadastro-generico', 
    templateUrl: 'cadastro-generico.component.html', 
    styleUrls: ['cadastro-generico.component.scss'], 
    changeDetection: ChangeDetectionStrategy.Default 
}) 
export class CadastroGenericoComponent extends Observable implements OnInit, AfterViewInit { 


    @ViewChild('stack') stack : StackLayout; 

    constructor(private routerExtensions: RouterExtensions, 
     private changeDetectionRef: ChangeDetectorRef, 
     public drawerService: DrawerService) { 

     super(); 
      console.log(`RelatorioComponent constructor`); 
     } 

     ngOnInit() { 
      console.log(`RelatorioComponent ngOnInit`); 
     } 

     ngAfterViewInit() { 
      console.log("RelatorioComponent ngAfterViewInit - this.drawerComponent.sideDrawer=", this.drawerService.drawer); 
      this.changeDetectionRef.detectChanges(); 
     } 

     navigateTo(pathToNavigate:string) { 
      console.log("navigating to:", pathToNavigate); 
      this.routerExtensions.navigate([pathToNavigate], {clearHistory: true}); 
     } 

     criaInput(){ 
      console.log("clicou cria input") 
      let lbl = new Label() 
      lbl.text = "Share This!" 
      this.stack.addChild(lbl) 
     } 

     criaSelect(){ 
      console.log("clicou cria select"); 
     } 
} 

Verfahren criaInput() ein Etikett auf dem Bildschirm hinzufügen sollten. Altought, wenn ich auf die Schaltfläche klicken, wird der folgende Fehler tritt auf:

System.err: com.tns.NativeScriptException:

System.err: Calling js method onClick failed

System.err: TypeError: this.stack.addChild is not a function

Irgendwelche Gedanken darüber, wie dieses Problem beheben?

Answer 1

ändern es dazu:

@ViewChild('stack') stack : ElementRef; // import { ElementRef } from "@angular/core"; 

// and later: 
const myStack: StackLayout = this.stack.nativeElement; // import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; 
myStack.addChild(.....);