J'ai un soucis lorsque je suis le tutoriel angular, lors d'ajouter les formulaires reactive, l'UI s'affiche correctement avec les bons routing mais j'ai des erreurs qui apparaissent et impossible d'ajouter un nouvel utilisateur. J'ai essayé de mettre des log ci et là, c'est encore un peu compliqué pour moi de débuger. Voici les messages d'erreur que j'obtiens :

UserListComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'slice' of undefined

Il semble que la variable passée au service user ne soit pas correctement définie, mais je ne vois pas d'erreur d'affichage. Lorsque je rempli le formulaire pour ajouter un nouvel utilisateur, le bouton submit ne fonctionne pas, et j'ai l'erreur suivante : 

NewUserComponent.html:2 ERROR TypeError: Cannot read property 'push' of undefined

voici également quelques extraits du code : 

user service : 

import { User } from '../models/User.model';
import { Subject } from 'rxjs/Subject';

export class UserService {
  private users: User[];
  userSubject = new Subject<User[]>();

  emitUsers() {
    this.userSubject.next(this.users.slice());
  }

  addUser(user: User) {
    this.users.push(user);
    this.emitUsers();
  }
}

user list :

import { Component, OnDestroy, OnInit } from '@angular/core';
import { User } from '../models/User.model';
import { Subscription } from 'rxjs/Subscription';
import { UserService } from '../services/user.service';

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

  private users: User[] = [
    new User('Will', 'Alexander', 'will@will.com', 'jus d\'orange', ['coder', 'boire du café'])
  ];
  userSubscription: Subscription;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userSubscription = this.userService.userSubject.subscribe(
      (users: User[]) => {
        this.users = users;
      }
    );
    this.userService.emitUsers();
  }



  ngOnDestroy() {
    this.userSubscription.unsubscribe();
  }

}

 et new user :

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { UserService } from '../services/user.service';
import { Router } from '@angular/router';
import { User } from '../models/User.model';

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

  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private userService: UserService,
              private router: Router) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.userForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.required],
      drinkPreference: ['', Validators.required],
      hobbies: this.formBuilder.array([])
    });
  }

  onSubmitForm() {
    const formValue = this.userForm.value;
    const newUser = new User(
      formValue['firstName'],
      formValue['lastName'],
      formValue['email'],
      formValue['drinkPreference'],
      formValue['hobbies'] ? formValue['hobbies'] : []
    );
    //console.log(newUser);
    this.userService.addUser(newUser);
    this.router.navigate(['/users']);
  }

  getHobbies(): FormArray {
    return this.userForm.get('hobbies') as FormArray;
  }

  onAddHobby() {
    const newHobbyControl = this.formBuilder.control(null, Validators.required);
    this.getHobbies().push(newHobbyControl);
}
}

Le git est accessible, si vous préférez directement tester ca chez vous,
https://github.com/tomlicha/AngularFirstProject
Merci !
Tom

-
Edité par TomLch 29 août 2019 à 9:10:01

Bonjour,

Mauvais forum

Le sujet est déplacé de la section HTML / CSS vers la section Javascript

j'ai trouvé le soucis finalement,

l'array de users défini avec will devait etre défini dans le user service et non pas dans le user list...

TomLch je me permets de répondre à ton sujet car de mon côté, impossible de faire fonctionner la méthode réactive pour les users, même en copiant collant le code du cours, dès que j'importe User dans mon provider ça fait tout sauter et j'ai un message d'erreur de type

Error: Can't resolve all parameters for User: (?, ?, ?, ?, ?).

Je me suis dit que tu étais peut-être passé par là, si tu as un indice, je suis preneuse, j'ai passé l'après-midi sur ce chapitre, je l'ai recommencé plusieurs fois entièrement et rien à faire, j'ai toujours ce message. Par contre, quand je supprime le User, mon site s'affiche super bien et tout fonctionne...

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.