Little problem with NgFor

Ben Ysil

unread,

Jan 16, 2019, 12:36:57 PM1/16/19

to Angular and AngularJS discussion

hi everybody

I've a little noob question,

I'm just a beginner. I'm trying to retrieve some data from an array.

I success to print data but not the first.

here is the app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes Posts</h2>
      <p>Mis à jour : {{ lastUpdate | date:'EEEE d MMMM y' | uppercase }}</p>
      <ul class="list-group">
        <app-post *ngFor="let post of posts; index as i"
        [PostIndex]="i" 
        [PostName]="post.name"
         [PostData]="post.contenu"
         [PostDate]="post.date"
         [PostLove]="post.lovelevel">{{i}}
       </app-post>
      </ul>
    </div>
  </div>
</div>

this is the app.component.ts

export class AppComponent {
 
  lastUpdate = new Date();
  posts =  [
    {
      name: 'Mon Premier post',
      date : this.lastUpdate,
      contenu : 'Tafgdgta titi toto',
      lovelevel : 0,
    },
    {
      name: 'Mon Premier post',
      date : this.lastUpdate,
      contenu : 'Tafgdgta titi toto',
      lovelevel : 0,
    },
    {
      name: 'Mon Premier post',
      date: new Date() ,
      contenu : 'Comme vous le constaterez, le CLI a créé un nouveau sous-dossier',
      lovelevel : 0,
    },
    {
      name: 'Mon Deuxième post',
      date: new Date() ,
      contenu : 'Tata titi toto',
      lovelevel : 0,
   },
   {
    name: 'Mon Post N°3',
      date: new Date() ,
      contenu : 'Tata titi toto',
      lovelevel : 0,
   },
   {
     name: 'Mon dernier post',
     date : new Date(),
     contenu : 'Tata titi toto',
     lovelevel : 0,
   }
  ];
}

this post.component.html

<li [ngClass]="{'list-group-item':true,
'list-group-item-success': getColor() === 'green',
'list-group-item-danger': getColor() === 'red'}">

  <h4 [ngStyle]="{color: getColor()}">{{PostName}} - {{PostLove}} -/* N°{{PostIndex}} </h4>
  {{ PostDate | date:'EEEE d MMMM y'}}
  <div><h5>{{PostData }}</h5></div>
  
<button class="btn btn-success"  (click)="OnLove()">Love it!</button>
  <button class="btn btn-danger"  (click)="OnDontLove()">Don't love it!</button>

</li>

and post.component.ts

export class PostListComponent implements OnInit {
  @Input() PostName: string;
  @Input() PostDate: 'new Date()';
  @Input() PostData : string;
  @Input() PostLove : number;
  @Input() PostIndex : number;
  constructor() { }
  getColor() {
    if (this.PostLove > 0) {
      return 'green';
    } else if (this.PostLove < 0) {
      return 'red';
    }
  }
  OnLove() {
    this.PostLove= this.PostLove+1;
    return this.PostLove;
    }
  OnDontLove() {
    this.PostLove= this.PostLove-1;
    return this.PostLove;
    }
    getLove() {
      if (this.PostLove > 0) {
        return true;
      } else { return false}
      }
   getNoLove() {
      if (this.PostLove < 0) {
        return true;
      } else { return false}
      }
  ngOnInit() {
  }

}

but it return me this :

2019-01-16 16_29_43-MonBlogAngular.png

The first Item is blank ! Can you tell me why ?

Thanks in advance :)

Sander Elias

unread,

Jan 17, 2019, 2:03:04 PM1/17/19

to Angular and AngularJS discussion

Hi Ben,

Yes, I can.

Js arrays are zero indexed. that means that it starts at `post[0]`

Regards

Sander

Ben Ysil

unread,

Jan 17, 2019, 2:12:11 PM1/17/19

to Angular and AngularJS discussion

Yes but I never used index position. Just Ngfor on an array . So why it's a get a first item blank ? blank item didn't exist in the array.

Tito

unread,

Jan 17, 2019, 3:11:55 PM1/17/19

to Angular and AngularJS discussion

you are using javascript's index here

<app-post *ngFor="let post of posts; index as i"

So it is deciding for you what the value of i is. In this case since, as Sander has indicated, Js arrays are zero indexed it will start at zero and not use your lovelevel

change it to

<app-post *ngFor="let post of posts;"

[PostLove]="post.lovelevel">

Some good reads here

https://angular.io/api/common/NgForOf

Reply all

Reply to author

Forward