Discussion :

[ricobye]

Bonsoir à tous

Encore un souci avec mes développements. Je pense suivre toutes les règles et préconisations pour afficher une petite liste mais ca ne passe pas. J'ai cette erreur qui m’empêche de dormir...

Can't bind to 'ngForOf' since it isn't a known...

J'ai importé les modules préconisés

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
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
 
import { ConnectService }     from '../../mdpublic/mdhome/services/connect.service';
import { GestcontractComponent } from '../mdadmin/gestcontract/gestcontract.component';
 
@NgModule({
  declarations: [
    GestcontractComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    CommonModule,
  ],
 
  providers: [
    { provide: ConnectService, useValue: ConnectService },
 
    ],
})
export class MddetailsModule { }

et a partir de mon composant, je remplis une liste. Elle est bien remplie car je vois le contenu dans ma console...

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
import { Component, OnInit } from '@angular/core';
import { ConnectService }     from '../../../mdpublic/mdhome/services/connect.service';
import { carinputdata, primedata } from '../../../mdpublic/mdhome/models/contract.model';
 
 
@Component({
  selector: 'app-gestcontract',
  templateUrl: './gestcontract.component.html',
  styleUrls: ['./gestcontract.component.scss']  
})
export class GestcontractComponent implements OnInit {
 
  carinputdata: carinputdata[] = [];
  error = '';
  success = '';
 
  constructor(private ConnectService: ConnectService) { }
 
  ngOnInit() {
 
    this.ConnectService.readPolicies().subscribe((carinputdata: carinputdata[])=>{
      this.carinputdata = carinputdata;
      console.log(this.carinputdata);
    })
 
  }
}

Mais et c'est là que j'ai un souci, le template n'affiche pas le contenu de ma liste

Code html :

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
<div class="container text-center">
    <h4>Liste contract</h4>
    <table class="table table-striped">
      <thead>
    <tr>
      <th>ID</th>
      <th>Numéro</th>
      <th>Marque</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let mydata of carinputdata[0]">
      <td>{{mydata.id}}</td>
      <td>{{mydata.numero}}</td>
      <td>{{mydata.marque}}</td>
    </tr>
    <tbody>
      </table>
  </div>

Mon ngFor pose problème. Le HTML est-il exécuté avant le select? Non pas possible...
Ma console m'intrigue. J'ai 2 fois l'erreur qui apparaît. Une fois avant ma liste et une fois après...



Pourriez vous m'aider s'il vous plait? Il y'a là une logique Angular qui m'échappe...

Cordialement

[krakatoa]

il y a quelques connaissances à avoir quand on travaille en asynchrone.


en asynchrone, avec des données type: any

Code html :

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

1
2
3
4
5
    <tr *ngFor="let mydata of carinputdata[0]">
      <td>{{mydata?.id}}</td>
      <td>{{mydata?.numero}}</td>
      <td>{{mydata?.marque}}</td>
    </tr>

an asynchrone, avec une simple variable

Code html :

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

1
2
3
4
5
<ng-container *ngIf="maVar">{{maVar}}</ng-container>
ou
<div *ngIf="maVar">{{maVar}}</div>
ou
<span ....

[ricobye]

Bonjour Krakatoa,

Je tourne la réponse dans tous les sens mais je n'arrive pas a voir la relation avec mon soucis... J'ai des données dans une table que je souhaite juste afficher dans un tableau. J'arrive à les afficher dans la console mais pas dans mon tableau... Ma situation correspond t'elle au premier cas asynchrone?

[krakatoa]

essaye, tu verras bien

ça donne quoi ça ?

Code :

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

1
2
 
{{carinputdata|json}}

** tu peux verifier que tu as le commonModule dans app.module.ts

Code :

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

1
2
3
4
5
6
7
 
import { CommonModule } from '@angular/common';
 
@NgModule({
  imports: [
    CommonModule
  ],

[ricobye]

Bonjour Krakatoa

J'ai essayé en modifiant le code et en m'assurant que le CommonModule est importé mais ça ne marche toujours pas. Impossible d'afficher mes données.
Je ne sais plus où chercher...

Cordialement

[krakatoa]

essaye ça:

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
 
  carinputdata: carinputdata[] = [];
  data1: any;
 
  error = '';
  success = '';
 
  constructor(private ConnectService: ConnectService) { }
 
  ngOnInit() {
    let that = this;
 
    this.ConnectService.readPolicies().subscribe((carinputdata: carinputdata[])=>{
      that.carinputdata = carinputdata;
      that.data1 = carinputdata[0];
      console.log(that.data1);
      console.log(that.carinputdata);
    })
 
  }
}

Code html :

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

1
2
3
4
<div *ngIf="data1">
{{data1}}
{{ data1|json}}
</div>

[ricobye]

Bonjour,

J'affiche bien les données dans la console mais pas dans ma page...Incroyable ça...

[krakatoa]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 constructor(private ConnectService: ConnectService) { }
 
  ngOnInit() {
    let that = this;
 
    this.ConnectService.readPolicies().subscribe((carinputdata: any)=>{
      that.carinputdata = carinputdata;
      that.data1 = carinputdata[0];
      console.log(that.data1);
      console.log(that.carinputdata);
    })
  }

qu'affiche les 2 consoles.log ?

[ricobye]

Bonjour,

Lorsque j’exécute le code, voici ce que la console m'affiche:



Je vois bien le contenu de ma table mais rien sur ma page...

Cordialement.

[krakatoa]

c'est impossible ! c'est un truc de OUF !!!!!!!

je peux avoir le code de : this.ConnectService.readPolicies() ? si je peux accéder à l'url pour tester de mon coté ?
sinon donne moi le contenu de: console.log(JSON.stringify(that.carinputdata));
je devrais me débrouiller avec pour tester sur mon poste

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
 
data1: any;
carinputdata: any;
 
constructor(private ConnectService: ConnectService) { }
 
  ngOnInit() {
    let that = this;
 
    this.ConnectService.readPolicies().subscribe((carinputdata: any)=>{
      that.carinputdata = carinputdata;
      that.data1 = carinputdata[0];
      console.log(that.data1);
      console.log(JSON.stringify(that.carinputdata));
    })
  }

(1) met juste ce code:

Code :

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

1
2
 
{{data1?.id}}

ça donne quoi ?


(2) ensuite met juste ce code

Code :

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

1
2
 
{{carinputdata[0].id}}

ça donne quoi ?

[ricobye]

Bonjour,

En mettant uniquement {{data1?.id}} j'affiche bien dans ma page l'id. Incroyable... Par contre {{carinputdata[0].id}} génère une erreur mais affiche l'id...
L'erreur affichée est:

ERROR TypeError: Cannot read property 'id' of undefined...

Le code du service est:

Code :

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

1
2
3
readPolicies(): Observable<carinputdata[]>{
        return this.HttpClient.get<carinputdata[]>(`${this.PHP_API_SERVER}/api/read.php`);
    }

Le read.php est:

Code php :

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
<?php
 
  require 'database.php';
 
  $carinput = [];
  $sql = "SELECT id, numero, marque FROM carinputdata";
 
  if($result = mysqli_query($con,$sql))
  {
    $i = 0;
    while($row = mysqli_fetch_assoc($result))
    {
      $carinput[$i]['id']    = $row['id'];
      $carinput[$i]['numero'] = $row['numero'];
      $carinput[$i]['marque'] = $row['marque'];
      $i++;
    }
 
    echo json_encode($carinput);
  }
  else
  {
    http_response_code(404);
  }
?>

Merci

[dukoid]

si url tu ne peux pas me le filer

je vais me debrouiller avec ça:

Code :

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

1
2
 
     console.log(JSON.stringify(that.carinputdata));

essaye ça:

Code :

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

1
2
 
{{carinputdata[0]?.id}}

[ricobye]

Bonjour Dukoid,

Comment faire pour l'url? Je travaille avec un serveur php local, Mysql local... Avez-vous un procédé pour faire tout ça en ligne?

En mettant {{carinputdata[0]?.id}}, j'affiche bien l'id et surtout sans erreur...

Dès que je passe au ngFor, plus rien ne s'affiche.

Code :

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

1
2
3
4
5
    <div *ngFor="let mydata of carinputdata">
        <div>{{mydata?.id}}</div>
        <div>{{mydata?.numero}}</div>
        <div>{{mydata?.marque}}</div>
    </div>

Merci

[krakatoa]

ON AVANCE

Code :

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

1
2
3
4
5
6
7
8
 
<ng-container *ngIf="carinputdata">
  <div *ngFor="let mydata of carinputdata">
        <div>{{mydata?.id}}</div>
        <div>{{mydata?.numero}}</div>
        <div>{{mydata?.marque}}</div>
    </div>
</ng-container>

[ricobye]

Krakatoa,

Toujours pas de liste avec ce code. Et persistance du message exotique...

Can't bind to 'ngIf' since it isn't a known property of 'ng-container'...

Incroyable...

[krakatoa]

est ce qu'on peut avoir le resultat de :

Code :

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

1
2
 
  console.log(JSON.stringify(that.carinputdata));

on te l'a demandé plusieurs fois

[ricobye]

La console affiche bien les données de l'instruction " console.log(JSON.stringify(that.carinputdata));"



Merci

[krakatoa]

tu peux copier coller stp
parceque là avec image je vais devoir taper à la main et je suis un gros faineasse

[ricobye]

Voici la valeur de la console

[{"id":"1","numero":"2334RE01","marque":"MAZDA"},{"id":"2","numero":"4321TR01","marque":"TOYOTA"}]

Merci

[dukoid]

ça fonctionne avec les données.
tu dois avoir un problème avec ton projet, des librairies qui manquent ou je ne sais pas quoi.

créé un nouveau projet Angular et teste juste cette partie

ng new test1