1
resposta

ciclo de vida de variável passada por componentes

boa tarde,

gostaria de entender melhor o ciclo de vida das variáveis passadas por componentes "@Input" .

pois na versão do angular que estou utilizando hj quando eu passo um Photo[] de um componente para outro eu exibo ele no html do componente q o recebeu, porem se eu usar o comando "console.log(photos);" me é retornado 0.

segue a declaração de ambos os componentes.

componente q envia o array:

import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo.service';
import { Photo } from '../photo';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos : Photo[]= [];

  constructor(
    private activatedRoot : ActivatedRoute,
    private photoService : PhotoService
    ){

  }

  ngOnInit(): void {
    const usuario:string = this.activatedRoot.snapshot.params.userName;
    this.photoService
      .listFromUser(usuario)
      .subscribe( fotos =>  this.photos = fotos );
  }
}
<ap-photos [photos]="photos" ></ap-photos>

componente q recebe a lista:

import { Component, OnInit, Input } from '@angular/core';
import { Photo } from '../../photo';

@Component({
  selector: 'ap-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnInit {

  @Input() photos: Photo[] =[];

  constructor() { }

  ngOnInit() {
    console.log("photos", this.photos);
  }

}

html do componente q recebe a lista:

<img *ngFor="let foto of photos" [src]="foto.url" [alt]="foto.description" />

versão do angular e node:

npm: 6.9.0

angular/cli: 


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.1.1
Node: 10.16.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.1
@angular-devkit/core         8.1.1
@angular-devkit/schematics   8.1.1
@schematics/angular          8.1.1
@schematics/update           0.801.1
rxjs                         6.4.0
1 resposta

Fala aí Allan, tudo bem? Muito estranho, olhando o seu código meio por cima, o mesmo parece estar ok.

Mas, pode ser que eu tenha deixado passar algum pequeno e minimo detalhe, por isso, vou pedir para você compartilhar o projeto comigo se possível.

Assim eu consigo rodar e ver o problema com mais calma e detalhes na minha máquina.

Pode ser através do Github ou Google Drive (zipado).

Fico no aguardo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software