尽管我在console.log（data）angular上获得数据，但数据不会显示在浏览器上 [英] Data not display on browser although I get data on console.log(data)angular

问题描述

问题



数据不显示在浏览器上，虽然我在console.log（数据）Angular上获取数据？



i需要显示员工的数据列表，但问题不在浏览器上显示但是如果我制作console.log（数据）



它显示为对象和数据数组显示你是否在浏览器上进行检查



employeelist.component.html

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

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

我的尝试：



文件共享和存储变得简单 [ ^ ]



dataresult

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

推荐答案

HTML和TS之间没有任何关系...

在HTML中，你在文件上运行一个双循环，在雇员里面运行当前的文件...

在您的TS中没有文件只有员工的单个变量（通过一些API填充）...

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

这篇关于尽管我在console.log（data）angular上获得数据，但数据不会显示在浏览器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！