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>