J'ai lu plusieurs réponses sur le débordement de pile concernant ce problème mais je ne semble pas trouver de solution
J'ai des enregistrements simples dans la base de données et je voudrais les montrer en utilisant un thème angulaire.
Mon code est comme ci-dessous
table-list.component.ts
<tbody>
<tr *ngFor='let element of array'>
<td>{{element.name}}, {{element.age}}</td>
<!-- <td>{{user.Address}}</td>
<td>{{user.City}}</td> -->
</tr>
app.module.ts
import { Injectable } from '@angular/core';
import { UserDetail } from './user-detail.model';
import { HttpClient } from "@angular/common/http";
import { ToastrService } from 'ngx-toastr';
@Injectable({
providedIn: 'root'
})
export class UserDetailService {
formData:UserDetail;
list :UserDetail[];
readonly rootURL = 'http://localhost:19199/api'
constructor(private http: HttpClient) { }
refreshList(){
let url="http://localhost:19199/api/Users"
this.http.get(url)
.toPromise().then(res =>this.list =res as UserDetail[]);
}
array = [
{
guid: '900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
age: 32,
name: 'Powers Schneider',
},
{
guid: '880381d3-8dca-4aed-b207-b3b4e575a15f',
age: 25,
name: 'Adrian Lawrence',
},
{
guid: '87b47684-c465-4c51-8c88-3f1a1aa2671b',
age: 32,
name: 'Boyer Stanley',
},
]
}
user-detail.service.ts
declarations: [
AppComponent,
AdminLayoutComponent
],
providers: [UserDetailService,
DetailsService],
bootstrap: [AppComponent]
})
Ceci est le code de la page html
table-list.component.html
import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { UserDetailService } from './../shared/user-detail.service';
import { UserDetail } from './../shared/user-detail.model';
import { DetailsService } from './../details.service';
import { ToastrService } from 'ngx-toastr';
//import { UsersService } from '../users.service'
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {
// users: any;
//currentUser = null;
//currentIndex = -1;
//title = '';
constructor(private service: UserDetailService,private toastr: ToastrService) { }
ngOnInit(): void {
//this.retrieveUsers();
this.service.refreshList();
}
Ni il montre les données de tableau que j'ai définies ni les données de la base de données.
4 Réponses :
Vous définissez this.list =res as UserDetail[] dans votre service,
vous devez donc utiliser la liste dans service.list
<tbody>
<tr *ngFor='let element of service.list'>
<td>{{element.name}}, {{element.age}}</td>
<!-- <td>{{user.Address}}</td>
<td>{{user.City}}</td> -->
</tr>
laissez element of service.list ne fonctionne pas aussi bien
dans votre code de question, vous pouvez utiliser service.array au lieu de service.list
oui montrant le tableau mais pas la liste ... essentiellement service.list ne fonctionne pas ie <tr * ngFor = 'let user of service.list'> <td> {{user.CompanyName}} </td> <td> {{user.UserName}} </td> <td>
Pourquoi utilisez-vous la promise ? utiliser observable .
<tbody *ngIf="list.length > 0">
<tr *ngFor='let element of list' >
<td>{{element.name}}, {{element.age}}</td>
</tr>
Composant:
let list = [];
ngOnInit(): void {
this.service.refreshList().subscribe(response => {this.list = response});
}
Html:
refreshList(){
let url="http://localhost:19199/api/Users"
return this.http.get(url);
}
J'ai initialisé la liste: UserDetail []; en service et le plus respectueusement dans votre composant, d'ailleurs j'ai essayé de cette façon aussi mais sans succès
Que voulez-vous dire par pas de succès? Obtenez-vous une réponse après un appel API? Pour vérifier l'imprimer comme cette list | json .
oui, je reçois une réponse api, j'ai vérifié en utilisant Postman et en utilisant également un appel direct dans le navigateur
Mec, vous devez le déboguer. Essayez console.log ou imprimez le JSON sur html et voyez ce qu'il y a dedans? est-ce indéfini ou la structure des données est-elle différente comme ça et indiquez-la ici.
Dans votre html, vous indiquez à votre directive * ngFor de récupérer une liste nommée tableau (qui n'est pas un nom recommandé à utiliser) qui est censé exister dans votre composant.ts ce qui n'est pas le cas, l'objet tableau n'existe pas dans votre composant .ts, vous devez le définir. Je suggérerais que votre service renvoie un observable,
<tbody>
<tr *ngFor='let element of list$|async'>
<td>{{element.name}}, {{element.age}}</td>
<!-- <td>{{user.Address}}</td>
<td>{{user.City}}</td> -->
</tr>
que vous interceptez dans votre composant.ts
import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { UserDetailService } from './../shared/user-detail.service';
import { UserDetail } from './../shared/user-detail.model';
import { DetailsService } from './../details.service';
import { ToastrService } from 'ngx-toastr';
//import { UsersService } from '../users.service'
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {
// users: any;
//currentUser = null;
//currentIndex = -1;
//title = '';
list$ = this.service.refreshList();
constructor(private service: UserDetailService,private toastr: ToastrService) { }
et vous l'utilisez dans votre modèle
refreshList(){
let url="http://localhost:19199/api/Users"
this.http.get(url)
.pipe(map(res =>res as UserDetail[]));
Après des jours de travail, j'ai trouvé la solution à mon problème
refreshList(){
let url="http://localhost:19199/api/users"
this.http.get<UserDetail[]>(url).subscribe(res=>{
this.list = res;
});
Le problème était dû à l'utilisation de la fonction .toPromise () qui n'est plus utile.La manière ci-dessus de récupérer l'enregistrement a résolu mon problème.Merci à tous ceux qui m'ont aidé.