Discussion :

[dj_mez]

Bonjour,

Je me forme sur Angular et je rencontre un soucis concernant l'affichage des données. J'utilise le property binding avec @Input mais je bloque...

Merci de m'aider.

Voici le template du parent

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul  class="list-group">
    <li [ngClass]="{'list-group-item': true,
                    'list-group-item-success': post.loveIts > 0,
                    'list-group-item-danger': post.loveIts < 0}">
 
      <app-post-list-item *ngFor="let tab of tabs" [post]="tab">       
      </app-post-list-item>
    </li>
  </ul>

le TS du parent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component, OnInit } from '@angular/core';
import { PostListItemComponent } from '../post-list/post-list-item/post-list-item.component';
 
@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
 
  tabs = [
  {
      title: 'Premier post',
      content: 'aaaaaaaaaa',
      loveIts: 0,
      created_at: new Date()
 
  },
  {
      title: 'Deuxieme post',
      content: 'zzzzzzzzzzz',
      loveIts: 1,
      created_at: new Date()
 
  }
 
];
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

le template enfant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<h4> {{ post.title }} </h4><br> 
{{ post.content }}
<button class="btn btn-success" (click)="add()">Love it</button>
<button class="btn btn-danger" (click)="sub()">Don't love it</button>
<br>

et le TS enfant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, OnInit, Input } from '@angular/core';
 
@Component({
  selector: 'app-post-list-item',
  templateUrl: './post-list-item.component.html',
  styleUrls: ['./post-list-item.component.css']
})
export class PostListItemComponent implements OnInit {
 
  @Input()  post: {
    title: string;
    content: string;
    loveIts: number;
    created_at: Date;
  }
 
  add() {
    this.post.loveIts++;
  }
 
  sub() {
    this.post.loveIts--;
  }
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

[dj_mez]

La balise <li> est situé au mauvais endroit. Je l'ai déplacé vers le composant enfant et j'ai modifié quelques petits trucs dans le code vu que j'essayais plusieurs possibilités. Si j'avais déplacé la balise <li> j'aurais déjà trouvé la solution...