Bonjour à tous,

Je suis actuellement le cours sur Angular (https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular).

Je rencontre actuellement un problème:

Mon application web fonctionne jusqu'à la partie 3 " Améliorez la structure du code avec les Services ", mais dès lors qu'il faut passer les informations de la vue app-component.html au nouveau component appareil-view, la boucle *ngFor ne passe plus, de ce que je comprends c'est qu'il n'arrive pas à récupérer les variables data binding, pourtant mon tableau appareils contient bien les 3 éléments de base. Je ne sais pas si finalement je devrais faire cette boucle plutôt dans appareil.component.html..

Voici le code correspondant en espérant que vous pourrez m'aider.

appareil-view-component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AppareilService } from '../services/appareil.service';

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

  appareils: any[];
  isAuth = false;

  lastUpdate = new Promise((resolve, reject) => {
    const date = new Date();
    setTimeout(
      () => {
        resolve(date);
      }, 2000
    );
  });

  constructor(private appareilService: AppareilService) { }

  ngOnInit() {
    this.appareils = this.appareilService.appareils;
  }

  onAllumer() {
    this.appareilService.switchOnAll();
  }

  onEteindre() {
    if(confirm('Etes-vous sûr de vouloir éteindre tous vos appareils ?')) {
      this.appareilService.switchOffAll();
    } else {
      return null;
    }
  }

}

appareil-view.component.html

<h2>Mes appareils</h2>
<div class="col-xs-12">
  <p>Mis à jour : {{ lastUpdate | async | date: 'short' | uppercase }}</p>
  <ul class="list-group">
    <app-appareil-view  *ngFor="let appareil of appareils; let i = index"
                     [appareilName]="appareil.name"
                     [appareilStatus]="appareil.status" 
                     [index]="i"></app-appareil-view>
    <button class="btn btn-success"
                [disabled]="!isAuth"
                (click)="onAllumer()">Tout allumer</button>
    <button class="btn btn-danger"
                [disabled]="!isAuth"
                (click)="onEteindre()">Tout éteindre</button>
  </ul>
</div>   

app.component.ts

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

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

app.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
        <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
	  </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

Merci d'avance

-
Edité par AdamEl2 29 janvier 2019 à 12:02:11