Click here to Skip to main content
15,886,067 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
problem

data not display on browser although i get data on console.log(data)Angular ?

i need to show employee list of data but problem is not show on browser but if i make console.log(data)

it display as array of object and data show if you make inspect on browser

employeelist.component.html
C#
<div class="col-md-12">  
  <h2> User Details</h2>  
  <div class="table-responsive table-container">  
      
    <table class="table">  
      <thead>  
        <tr>  
          <th>EmployeeId</th> 
          <th>BranchCode</th>  
          <th>EmployeeName</th>  
          <th>EmployeeAge</th>  
          <th>JoinDate</th>  
          <th>BirthDate</th>  
          <th>Active</th>  
        </tr>  
      </thead>  
      <tbody *ngFor="let doc of documents; let i = index">  
          <tr *ngFor = "let emp  of doc.employees">
              <td> {{emp.EmployeeId}}</td>  
              <td> {{emp.BranchCode}}</td>  
              <td> {{emp.EmployeeName}}</td>  
              <td>{{emp.EmployeeAge}}</td>  
              <td>{{emp.JoinDate}}</td>  
              <td>{{emp.BirthDate}}</td> 
              <td>{{emp.Active}}</td> 
          </tr>
           
          
        
      </tbody>  
    </table>  
  </div>  
</div>  

on apiservice file 
 getEmployees() {  
                return this.http.get<Employee[]>('https://localhost:44326/api/Employee');  
              } 
on employeelist.component.ts
})
export class EmployeeListComponent implements OnInit {
  employees: Employee[];
  constructor(private apiservice: ApiService,private toastr : ToastrService) { }

  ngOnInit() {
    this.apiservice.getEmployees().subscribe((data: Employee[]) => {  
      this.employees = data;  
      console.log(this.employees)
    });  
  }

I modified code on view as following
<tbody>  
 <tr *ngFor = "let emp  of employees">
 </tr>
 </tbody>  


What I have tried:

File sharing and storage made simple[^]

dataresult
employeelist.component.ts:18 (2) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {employeeId: 1, branchCode: 1, employeeName: "ahmed", employeeAge: 12, joinDate: "2018-12-12T00:00:00", …}1
Posted
Updated 18-Feb-19 0:26am
v2

1 solution

There is no fit between your HTML and TS...
In HTML you run a double-loop on documents and inside it on employees of the current doc...
In your TS there is not documents only a single variable of employees (filled via some API)...
 
Share this answer
 
Comments
ahmed_sa 18-Feb-19 6:26am    
thank you for reply
i modified post but not also working
ahmed_sa 18-Feb-19 6:27am    
still not working

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900