Bonjour à tous,

Cela fait plusieurs heures que je bloque sur le premeir TP du cours Angular. Alors mon problème est le suivant : 

Je dois faire passer les données d'un tableau du component père à son fils, mais ça ne marche pas :-(.

ci dessous mon code : 

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  title = 'Le plus beau blog de l\'univers';

  posts: [
    {
      title: 'Un nouvel article',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros augue. Etiam facilisis lacus velit, at gravida ante ultrices a. Donec tempor velit ut risus malesuada, sit amet consectetur enim laoreet. Quisque commodo tempus mattis. In hac habitasse platea dictumst. Proin facilisis lorem sed sem rutrum pulvinar. Nunc sem enim, fringilla non vulputate sit amet, pharetra eget leo. Suspendisse id pharetra ante. ',
      loveIts: 2
    },
    {
      title: 'Un secon article',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros augue. Etiam facilisis lacus velit, at gravida ante ultrices a. Donec tempor velit ut risus malesuada, sit amet consectetur enim laoreet. Quisque commodo tempus mattis. In hac habitasse platea dictumst. Proin facilisis lorem sed sem rutrum pulvinar. Nunc sem enim, fringilla non vulputate sit amet, pharetra eget leo. Suspendisse id pharetra ante. ',
      loveIts: 0
    },
    {
      title: 'Un premier article',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet eros augue. Etiam facilisis lacus velit, at gravida ante ultrices a. Donec tempor velit ut risus malesuada, sit amet consectetur enim laoreet. Quisque commodo tempus mattis. In hac habitasse platea dictumst. Proin facilisis lorem sed sem rutrum pulvinar. Nunc sem enim, fringilla non vulputate sit amet, pharetra eget leo. Suspendisse id pharetra ante. ',
      loveIts: -1
    }
  ];

}

app.component.html

<div class="container">
  <h1>{{ title }}</h1>
  <app-post-list [posts]="posts"></app-post-list>
</div>

post-list.component.ts

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

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

  @Input() posts: any;

  constructor() { }

  ngOnInit() {
  }

}

post-list.component.html

<ul class="list-group">
   <app-post-list-item *ngFor="let post of posts" [post]="post"></app-post-list-item>
</ul>

post-list-item.component.ts

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

@Component({
  selector: 'app-post-list-item',
  templateUrl: './post-list-item.component.html',
  styleUrls: ['./post-list-item.component.scss']
})
export class PostListItemComponent implements OnInit {

  @Input() post: any;

  constructor() { }

  ngOnInit() {
  }

}

post-list-item.component.html

<h3>{{post.title}}</h3>

Je ne vois vraiment pas ce qui bloque :-/

Merci pour votre aide

-
Edité par dapixo 15 août 2019 à 14:25:27

Salut !

Il y a un point qui engendre souvent des problèmes avec Angular et Typescript, c'est la précipitation quand on écrit du code.

On prend l'habitude de déclarer nos variables comme ça :

phrase: string = "";

Du coup lorsqu'on ne souhaite pas indiquer le type de la variable à Angular, on se retrouve à écrire ça :

phrase: "";

Ce qui provoque une erreur, comme dans ton AppComponent, ton tableau n'est pas correctement assigné à ta variable posts.

Pense à jeter un oeil à ta console dans ce genre de cas, elle est parfois compliqué à déchiffrer mais peut t'apporter une aide réelle pour résoudre des bugs !

Bon courage pour la suite du cours !

Super merci !!

Effectivement, une erreur bête!