*ngFor 没有显示任何记录

Posted 2023-03-31

【中文标题】*ngFor 没有显示任何记录

【英文标题】：*ngFor is not showing any record

【发布时间】：2020-11-12 08:30:13

【问题描述】：

我已经阅读了有关此问题的堆栈溢出的几个答案，但我似乎没有得到解决方案

我在数据库中有简单的记录，我想用一个角度主题来展示它们。

我的代码如下

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',
        ,
      ]

这是html页面的代码

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>

它既不显示我定义的数组数据，也不显示数据库中的数据。

【参考方案1】：

你为什么使用promise？使用observable。

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

组件：

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>

【讨论】：

我已经初始化了列表：UserDetail[];在服务中，最恭敬地在您的组件中，顺便说一句，我也尝试过这种方式，但没有成功

不成功是什么意思？ api调用后你得到响应了吗？要检查像这样打印它list | json。

是的，我得到了 api 响应，我已经使用 Postman 以及在浏览器中使用直接调用进行了检查

老兄，你必须调试它。试试 console.log 或在 html 上打印 JSON，看看里面有什么？是未定义还是数据结构不同，并在此处提供。

【参考方案2】：

您在服务中设置this.list =res as UserDetail[]，

所以你需要使用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>

【讨论】：

让 service.list 的元素不能正常工作

在您的问题代码中，您可以使用 service.array 而不是 service.list

是显示数组但不显示列表...基本上 service.list 不起作用，即 user.CompanyName user.UserName

【参考方案3】：

在您的 html 中，您告诉 *ngFor 指令获取一个名为 array 的列表（这不是推荐使用的名称），该列表应该存在于您的 component.ts 中，而不是如果您的 component.ts 中不存在 array 对象，您必须定义它。 我建议您的服务返回一个可观察的，

 refreshList()

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

你在你的 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)  

然后你在你的模板中使用它

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

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

【参考方案4】：

经过几天的工作，我找到了解决问题的方法

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

问题是由于使用了 .toPromise() 函数，该函数不再有用。所以上述获取记录的方式解决了我的问题。感谢所有帮助我的人。