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

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

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

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...

Citation:

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

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

Code:

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:

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:

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...

Pièce jointe 576554

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

Cordialement

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

en asynchrone, avec des données type: any
Code:

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:

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

04/08/2020, 20h43
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?

essaye, tu verras bien

ça donne quoi ça ?
Code:

1 2 {{carinputdata|json}}
** tu peux verifier que tu as le commonModule dans app.module.ts
Code:

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

08/08/2020, 14h38
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

essaye ça:

Code:

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:

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

10/08/2020, 19h21
ricobye

Bonjour,

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

Code:

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 ?

12/08/2020, 16h33
ricobye

1 pièce(s) jointe(s)

Bonjour,

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

Pièce jointe 577137

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

Cordialement.

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:

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:

1 2 {{data1?.id}}
ça donne quoi ?

(2) ensuite met juste ce code
Code:

1 2 {{carinputdata[0].id}}
ça donne quoi ?

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:

Citation:

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

Le code du service est:

Code:

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

Le read.php est:

Code:

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

14/08/2020, 17h02
dukoid
si url tu ne peux pas me le filer

je vais me debrouiller avec ça:
Code:

1 2 console.log(JSON.stringify(that.carinputdata));
essaye ça:
Code:

1 2 {{carinputdata[0]?.id}}
14/08/2020, 17h19
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:

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

ON AVANCE

Code:

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>

14/08/2020, 17h53
ricobye

Krakatoa,

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

Citation:

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

Incroyable...
14/08/2020, 19h06
krakatoa
est ce qu'on peut avoir le resultat de :
Code:

1 2 console.log(JSON.stringify(that.carinputdata));
on te l'a demandé plusieurs fois
14/08/2020, 20h22
ricobye

1 pièce(s) jointe(s)

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

Pièce jointe 577302

Merci
14/08/2020, 20h44
krakatoa

tu peux copier coller stp
parceque là avec image je vais devoir taper à la main et je suis un gros faineasse
14/08/2020, 21h01
ricobye

Voici la valeur de la console

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

Merci
14/08/2020, 21h50
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

Voir 40 message(s) de cette discussion en une page