我的用户数据正在 html 但 html 页面不显示用户数据

Question

İ 当有人打开用户页面时尝试这样做 Person 会看到用户详细信息，但是此 html 页面无法正常工作，就像 this.Users 详细信息正在数据库中进入 html 页面例如名字、ID 或电子邮件，但当我试图查看这些数据时，我看不到

我越来越喜欢这张照片

但我想这样看

这是我的html代码

<div *ngIf="dataLoaded==false" class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

 


<table *ngIf="dataLoaded==true" class="table">
  <thead>
    <tr>
      <th scope="col">Email</th>
      <th scope="col">Id</th>
      <th scope="col">Adı</th>
      <th scope="col">Soyadı</th>
       
       
     
    </tr>
  </thead>
  <tbody>
 
    <tr *ngFor="let user of users ;">
      
      <td>{{ user.Email }}</td>
      <td>{{ user.Id }}</td> 
      <td>{{ user.FirstName }}</td>
      <td>{{ user.LastName }}</td>
      
     
    </tr>
  </tbody>
   
  


</table>

这是我的打字稿代码

import { Component, OnInit } from "@angular/core";
 import { Users } from "src/app/models/Users";
import { AuthService } from "src/app/services/auth.service";
import { ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
 
 

 

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent implements OnInit {
  user: Users   ;
  users : Users[] = []
  dataLoaded = false;
 

  constructor(private authservice: AuthService,
    private activatedRoute :ActivatedRoute, private toastrService:ToastrService
   ) {}

    
  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params=>{
      if(params["Id"]){
        this.GetUserById(params["Id"])
      }else{
        this.getusers()
      }
    })
}



  getusers() {
    this.authservice.getusers().subscribe(response=>{
      this.users = response.data
      console.log(this.users)
      this.dataLoaded = true;
    })   
  }

  GetUserById(Id:number) {
    this.authservice.GetUserById(Id).subscribe(response=>{
      this.user= response.data
      this.dataLoaded = true;
      console.log(this.users)
 
    })   
  }

}

这是我的控制台日志

[webpack-dev-server] Live Reloading enabled. index.js:551
Array [ {…}, {…} ]

0: Object { id: 3002, firstName: "striasd", lastName: "stringwww", … }

email: "old@old.com"

firstName: "striasd"

id: 3002



lastName: "stringwww"


 
status: true

<prototype>: Object { … }


1: Object { id: 4002, firstName: "stringq", lastName: "stringq", … }

length: 2

<prototype>: Array []

这是我的 html 控制台图像

所以我该怎么办或者我有什么错

Answer 1

 <tr *ngFor="let user of users.user">
  
  <td>{{ user.email }}</td>
  <td>{{ user.id }}</td> 
  <td>{{ user.firstName }}</td>
  <td>{{ user.lastName }}</td>

</tr>

希望这能奏效。

Answer 2

您使用大写字母呈现数据，但您的数据参数是小写字母，我希望这是问题所在。

<tr *ngFor="let user of users ;">
     
     <td>{{ user.email }}</td>
     <td>{{ user.id }}</td> 
     <td>{{ user.firstName }}</td>
     <td>{{ user.lastName }}</td>
   </tr>

我的用户数据正在 html 但 html 页面不显示用户数据

My Users datas are coming in html but html page does not show users data

javascript

typescript

visual-studio-code