*ngFor is not showing any record

user_1909784 0
Viewed 722

enter image description here

I have read several answers on stack overflow regarding this issue but I seem not to get a solution

I have simple records in database and I would like to show them using an angular theme .

My code is as below

table-list.component.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 = '';



constructor(private service: UserDetailService,private toastr: ToastrService) { }

  ngOnInit(): void {
    //this.retrieveUsers();
    this.service.refreshList();
  }

app.module.ts

 declarations: [
    AppComponent,
    AdminLayoutComponent
   


  ],
  providers: [UserDetailService,
    DetailsService],
  
  bootstrap: [AppComponent]
})

user-detail.service.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',
        },
      ]


}

This is the code for html page

table-list.component.html

<tbody>
   <tr *ngFor='let element of array'>

   <td>{{element.name}}, {{element.age}}</td>
   <!-- <td>{{user.Address}}</td>
   <td>{{user.City}}</td> -->
     </tr>

Neither it shows the array data i have defined neither it shows the data from database. enter image description here

webapi angular typescript asp.net-core asp.net
4 Answers

Why are you using promise? use observable.

refreshList(){
 let url="http://localhost:19199/api/Users"
 return this.http.get(url);
}

COmponent:

let list = [];
ngOnInit(): void {
 this.service.refreshList().subscribe(response => {this.list = response});
}

Html:

<tbody *ngIf="list.length > 0">
 <tr *ngFor='let element of list' >
  <td>{{element.name}}, {{element.age}}</td>
 </tr>
user_40749800

You set this.list =res as UserDetail[] inside your service,

so you need use the list in 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>
user_49645690

In your html, you tell your *ngFor directive to fetch a list named array (which is not a recommended name to use) that is supposed to exist in your component.ts which is not the case, array object does not exist in your component.ts, you have to define it. I would suggest that your service return an observable,

 refreshList(){

    let url="http://localhost:19199/api/Users"
     this.http.get(url)
     .pipe(map(res =>res as UserDetail[]));

that you intercept in your component.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) { }

and you use it in your template

<tbody>
   <tr *ngFor='let element of list$|async'>

   <td>{{element.name}}, {{element.age}}</td>
   <!-- <td>{{user.Address}}</td>
   <td>{{user.City}}</td> -->
     </tr>
user_14100440

After days of work i have found the solution of my issue

  refreshList(){
    let url="http://localhost:19199/api/users"
     this.http.get<UserDetail[]>(url).subscribe(res=>{
       this.list = res;
     });

Problem was due to the use of .toPromise() function which is of no more use.So above way of fetching record resolved my issue.Thanks to every one who helped me .

user_19097840
Related