Bonjour à tous,

Cela fait 2 jours que j'essaie de comprendre ce problème sans succès, alors voilà c'est sur l'exercice "mini blog" du cours d'angular, j'essaie boucler sur la liste de Post (créé dans app.component) que j'ai transmis au composant enfant (post-list.component) voici mes fichiers :

app.component.html

<div class="container">*
    <div class="row">
      <div class="col-xs-12">
        <h2>Posts</h2>
        <ul class="list-group">
          <app-post-list [posts]="posts"></app-post-list>
        </ul>
      </div>
    </div>
</div>

app.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'tp1-blog';

  @Input() posts = [
    {
      title : 'Mon premier post',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ',
      created_at: Date
    },
    {
      title : 'Mon second post',
      content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,',
      created_at: Date
    },
    {
      title : 'Un autre post',
      content: 'Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet',
      created_at: Date
    }

  ];
}

 et maintenant voici mes 2 fichier du component enfant :

post-list.component.html :

<div class="container">
      <div class="row">
          <div class="col-xs-12">
              <ul class="list-group">
                <app-post-list *ngFor="let post of posts"
                                  [title] = "post.title"
                                  [content] = "post.content"></app-post-list>
              </ul>
          </div>
      </div>
</div>

post-list.component.ts :

import {Component, Input, OnInit} 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;
  @Input() content;
  @Input() title;
  constructor() { }

  ngOnInit(): void {
  }

}

Alors voilà j'ai normalement bien transmis mon tableau de post (qui se trouve dans app.component.ts) vers le composant post-list.component.ts mais quand dans le fichier ts du même composant j'essaie d'afficher les posts du tableau rien ne s'affiche et je ne comprends pas d'où cela peut venir car j'ai repris la même syntaxe que le cours, si quelqu'un peut m'aider ça serait avec grand plaisir

Merci d'avance pour l'attention que vous porterez à mon post et bonne journée à tous !

Bonjour,

met t'as boucle dans app.component.html comme ça : 

<div class="container">
      <div class="row">
          <div class="col-xs-12">
              <ul class="list-group">
                <app-post-list *ngFor="let post of posts"
                                  [title] = "post.title"
                                  [content] = "post.content"></app-post-list>
              </ul>
          </div>
      </div>
</div>

et appel les valeurs que t'as binder dans post-list.component.html comme ça:

<h3>{{ title }}</h3> // call @Input() title (essaie de renommer ça pour pouvoir faire la différence genre : postTitle)

<p>{{ content }}</p> // call @Input() content (essaie de renommer ça pour pouvoir faire la différence genre : postContent)

comme ça dans post-list.component.html tu auras :

<h3>{{ postTitle }}</h3>
<p>{{ postContent }}</p>

Et n'oublie pas de typer tes éléments dans post-list.component.ts :

@Input() posts: array; // ici renomme posts par Post
@Input() content : string; // ici renomme content par postContent
@Input() title : string; // ici renomme title par postTitle 

Revoie la partie data-binding de ton cours pour y voir plus claire.

Si ça ne marche pas essaie de montrer l'erreur de la console. 

Bonjour MohamedSow5 et merci de ta réponse, j'ai réussi à le faire juste après avoir créé le post, mais oui effectivement j'ai utilisé la même chose que ta solution et ça a fonctionné mais ça servira sûrement aux futurs initiés qui rencontreront le même problème !

Merci encore à toi et bonne journée

Edit : doit-on toujours typer les variables ou est-ce juste une histoire de maintenabilité du code ? 

-
Edité par tdd 8 juillet 2020 à 12:32:47