variable passant angulaire à d'autres la page

Question

Dans mon projet, angulaire, Disons que je suit la configuration:

Page principale:

.html:

<div class="main component" *ngFor="let item of items;"> 
    <my-card [info]="item"></my-card>    
</div> 

page Composant:

.ts:

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'my-card', 
    templateUrl: 'myCard.html' 
}) 

export class myCard{ 
    @Input() info: Array<any>;  

} 

.html:

<div class="subComponent"> {{info}}</div> 

L'idée est d'utiliser le modèle myCard HTML à l'intérieur de la page principale, qui fonctionne très bien.

Toutefois, le info n'est pas défini à l'intérieur du fichier .ts.

Comment est-ce que je changerais le code de sorte que la variable info du main page soit définie?

export class myCard{ 
    @Input() info: Array<any>; 

    console.log(info); //Currently undefined 

}; 

Answer 1

import { Component, Input, SimpleChanges } from '@angular/core'; 

@Component({ 
    selector: 'my-card', 
    templateUrl: 'myCard.html' 
}) 

export class myCard implements OnInit, OnChanges { 
    @Input() info: Array<any>; 

    ngOnInit() { 
     console.log(this.info) 
    } 
    ngOnChanges(changes : SimpleChanges) { 
     if(typeof changes['info'] !== 'undefined'){ 
     console.log(this.info) 
     } 
    } 
} 

Answer 2

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'my-card', 
    templateUrl: 'myCard.html' 
}) 

export class myCard{ 
    @Input() info: any; 

    ngOnChanges() { 
    console.log(this.info); 
    } 

} 

Answer 3

s'il vous plaît vérifier example code, si possible s'il vous plaît partager votre code si elle ne permet pas.

import { Component } from '@angular/core'; 

import { ChildComponent } from './child.component'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <div *ngFor="let name of names"> 
    <app-child [name]="name"></app-child> 
    </div> 
    ` 
}) 
export class AppComponent { 
    title = 'hello'; 

    names:string[]=[]; 

    constructor(){ 

    this.names=['raj','honey','kinshuk']; 

    } 

} 

import {Component,Input} from '@angular/core'; 

@Component({ 
    selector: 'app-child', 
    templateUrl: './child.template.html' 
}) 
export class ChildComponent{ 

    @Input() name; 

}