Asp.net *ngFor没有显示任何记录

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

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

我的代码如下

表-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 = '';

list$ = this.service.refreshList();

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

app.module.ts

user-detail.service.ts

这是html页面的代码

table-list.component.html

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

您在服务中将this.list=res设置为UserDetail[]

因此，您需要使用service.list中的列表

您在服务中将this.list=res设置为UserDetail[]

因此，您需要使用service.list中的列表

你为什么用承诺？使用可观察的

组成部分：

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

Html:

你为什么用承诺？使用可观察的

组成部分：

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

Html:

---

在html中，您告诉*ngFor指令获取一个名为array的列表，该列表不是建议使用的名称，它应该存在于您的组件中。ts事实并非如此，数组对象不存在于您的组件中。ts您必须定义它。 我建议您的服务返回一个可观察的

 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>

---

在html中，您告诉*ngFor指令获取一个名为array的列表，该列表不是建议使用的名称，它应该存在于您的组件中。ts事实并非如此，数组对象不存在于您的组件中。ts您必须定义它。 我建议您的服务返回一个可观察的

 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>

---

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

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

---

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

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

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

---

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

让服务元素。在问题代码中列出它不起作用的原因，您可以使用service.array而不是service.listyes显示数组但不显示列表…基本上service.list不起作用i-e{{user.CompanyName}{{user.UserName}}让service.list元素也不起作用在问题代码中，可以使用service.array而不是service.listyes显示数组但不显示列表…基本上service.list不起作用i-e{user.CompanyName}{{user.UserName}我已经初始化了列表：UserDetail[]；在服务中，最值得尊敬的是在您的its in组件中，顺便说一句，我也尝试过这种方法，但没有成功。你说没有成功是什么意思？api调用后您是否收到响应？要检查，请按此列表打印| json。是的，我收到了api响应，我使用Postman和直接调用browserDude进行了检查，您必须删除ug it.Try console.log或在html上打印JSON，看看里面有什么？是未定义的还是数据结构与此不同，请在这里提供。我已经初始化了列表：UserDetail[]；在服务中，最值得尊敬的是在您的its in组件中，顺便说一句，我也尝试过这种方法，但没有成功。你说没有成功是什么意思？api调用后您是否收到响应？要检查，请按此列表打印| json。是的，我收到了api响应，我使用Postman和直接调用browserDude进行了检查，您必须删除ug it.Try console.log或在html上打印JSON，看看里面有什么？是未定义的还是数据结构与此不同，请在此处提供。

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