Parameter "undefined" when wanting to use a string in Angular2

Question

Parameter "undefined" when wanting to use a string in Angular2

Navigation

#1 by (0 votes)

1

I am trying to pass an id from a div to a child component, this works for me if I use it in the template of the child component, but when I want to use it in the code it appears as undefined

parent component with its respective template

import { Component} from '@angular/core';
import {Tables} from '../single-table-component/single.table.component';
 
@Component({
	selector:'table-component',
	templateUrl: 'table.component.html',
	styleUrls: ['table.component.css']
})
export class TableComponent{

	constructor(
    ){
		
	}

}

  <ngb-panel id="static-1" title="GASTOS REMUNERACIONALES" id="gastoRemuneracionales" #parentInput (click)='0'  class="cd col-md-12">
    <ng-template ngbPanelContent>
         <tables [parentValue]="parentInput.id"></tables>
    </ng-template>
  </ngb-panel>

the id id="gastoRemuneracionales" is what I want to pass on to the child through <tables [parentValue]="parentInput.id"></tables>

child component code

import {Component, Input} from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {TableComponent} from '../table-component/table.component';

 @Component({
	selector: 'tables',
	templateUrl: './single.table.component.html',
	inputs: ['parentValue']
})
export class Tables{
	closeResult: string;
	title:string = 'hola mundo';
	datos: FirebaseListObservable<any[]>;
	public parentValue:string;

	constructor(private modalService: NgbModal, private af : AngularFireDatabase) {
			console.log(this.parentValue+  this.title)
			this.af.list('/subvencionEscolar/'+ this.parentValue);	
		}
}

<table class="table table-striped tb col-md-12">
			<thead>
				<th>N°</th>
				<th>Nombre</th>
				<th>Detalles</th>
				<th>Total</th>
				<th>{{parentValue}}</th>
			</thead>
			<tbody>
				<tr *ngFor="let mocks of datos | async">
							<th>{{mocks.id}}</th>
				      <th> {{mocks.name}} </th>
				      <td> <button class="btn btn-lg btn-outline-primary">Launch demo modal</button>
</td>
				      <td>{{mocks.detail.montodoc}}</td>
		    	</tr>
			</tbody>
		</table>

in the template of the child is received without any problem


<th>{{parentValue}}</th>

but in the code it shows me undefined


constructor(private modalService: NgbModal, private af : AngularFireDatabase) {
    console.log(this.parentValue+  this.title)
    this.af.list('/subvencionEscolar/'+ this.parentValue);

}

the console log shows me "undefinedhola mundo" where the hello world is this.title : c I am new at angular, and I have searched everywhere, always arriving at the same result, in advance thanks for your help

angular2-template angularjs-2.0

asked by sebastian acuña 10.05.2017 в 08:08

source

1 answer

element.style before GridView Trigger to calculate hours pl / sql

score 0 · Accepted Answer

Good, as I put you in the comment it is not very clear to me where you are having the problem of undefined whether in the father or the son. Anyway I leave a link with how they pass in Angular data from a parent component to your child and vice versa. Using Input and Output

Now in your specific case to pass the id would be something like this:

Parent component:

import { Component} from '@angular/core';
import {Tables} from '../single-table-component/single.table.component';
 
@Component({
	selector:'table-component',
	templateUrl: 'table.component.html',
	styleUrls: ['table.component.css']
})
export class TableComponent{
	id: any;
	name: any;
	detail:any;

	constructor(
    ){
    // Tienes que dar valor a tu variable aun que entiendo que ya lo haces en alguna parte del código    pero que no lo has puesto aquí.
    this.id = 'Hola Mundo';
    }

}

  <ngb-panel id="static-1" title="GASTOS REMUNERACIONALES" id="gastoRemuneracionales" #parentInput (click)='0'  class="cd col-md-12">
    <ng-template ngbPanelContent>
         <tables [parentValue]="id"></tables>
    </ng-template>
  </ngb-panel>

Child component:

import {Component, Input} from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {TableComponent} from '../table-component/table.component';

 @Component({
    selector: 'tables',
    templateUrl: './single.table.component.html'
})
export class Tables{
    closeResult: string;
    title:string = 'hola mundo';
    datos: FirebaseListObservable<any[]>;
    //public parentValue:string;
    @Input() parentValue: string;

    constructor(private modalService: NgbModal, private af : AngularFireDatabase) {
            console.log(this.parentValue+  this.title)
            this.af.list('/subvencionEscolar/'+ this.parentValue);  
        }
}

You must collect the value in the child using @Input () name of the variable that you receive: type of variable