Asp.net AspNet Core Angular*NgFor不显示数据

我有一个问题与使用ngfor显示数据有关。页面很可能在加载之前“显示”数据，这就是表为空的原因。我想推迟，但我不知道怎么做

空表：

My.ts文件：

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 

@Component({
selector: 'fetchdata',
templateUrl: './fetchdata.component.html'
})

export class FetchDataComponent {
public events: Event[];

constructor(httpClient: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    httpClient.get<Event[]>(baseUrl + 'api/Events').subscribe(result => {
        this.events = result;
    }, error => console.error(error));
}

}

interface Event {
  EventID: number;
  EventName: string;
  EventLocation: string;
  EventDate: Date;
  EventDesc: string;
  EventReq: number;
}

从'@angular/core'导入{Component，Inject}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：“fetchdata”，
templateUrl:“./fetchdata.component.html”
})
导出类FetchDataComponent{
公共活动：活动[]；
构造函数（httpClient:httpClient，@Inject（'BASE_URL'）baseUrl:string）{
httpClient.get（baseUrl+'api/Events'）.subscribe（结果=>{
这个事件=结果；
}，error=>console.error（error））；
}
}
接口事件{
EventID：编号；
EventName:string；
EventLocation:字符串；
事件日期：日期；
EventDesc:string；
EventReq：数字；
}

My.html文件：

<h1>Events</h1>

    <p *ngIf="!events"><em>Loading...</em></p>

  <table class='table' *ngIf="events">
    <thead>
     <tr>
     <th> EventID: </th>
     <th> EventName: </th>
     <th> EventLocation: </th>
     <th> EventDate: </th>
     <th> EventDesc: </th>
     <th> EventReq: </th>
     </tr>
    </thead>
   <tbody>
    <tr *ngFor="let event of events">
        <td>{{ event.EventID }}</td>
        <td>{{ event.EventName }}</td>
        <td>{{ event.EventLocation }}</td>
        <td>{{ event.EventDate }}</td>
        <td>{{ event.EventDesc }}</td>
        <td>{{ event.EventReq }}</td>
    </tr>
   </tbody>

事件
正在加载

事件ID:
事件名称：
活动地点：
活动日期：
事件描述：
事件请求：
{{event.EventID}
{{event.EventName}
{{event.EventLocation}
{{event.EventDate}
{{event.EventDesc}}
{{event.EventReq}}

示例数据已声明。我可以通过邮递员看到他们：

如果有人能告诉我，我会非常感激的。谢谢你抽出时间

Event.cs：

using System;
using System.Collections.Generic;

namespace ASPNETCoreAngular.Models
{
 public partial class Event
 {
    public Event()
    {
        GuestList = new HashSet<GuestList>();
    }

    public int EventId { get; set; }
    public string EventName { get; set; }
    public string EventLocation { get; set; }
    public DateTime? EventDate { get; set; }
    public string EventDesc { get; set; }
    public int? EventReq { get; set; }

    public ICollection<GuestList> GuestList { get; set; }
}

使用系统；
使用System.Collections.Generic；
命名空间ASPNETCoreAngular.Models
{
公开部分班级活动
{
公共活动（）
{
GuestList=newhashset（）；
}
public int EventId{get；set；}
公共字符串EventName{get；set；}
公共字符串EventLocation{get；set；}
公共日期时间？事件日期{get；set；}
公共字符串EventDesc{get；set；}
public int？EventReq{get；set；}
公共ICollection来宾列表{get；set；}
}

控制器：

[Produces("application/json")]
[Route("api/Events")]
public class EventsController : Controller
{
    private readonly TIMyContext _context;

    public EventsController(TIMyContext context)
    {
        _context = context;
    }

    // GET: api/Events
    [HttpGet]
    public IEnumerable<Event> GetEvent()
    {
        return _context.Event;
    }

    // GET: api/Events/5
    [HttpGet("{id}")]
    public async Task<IActionResult> GetEvent([FromRoute] int id)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var @event = await _context.Event.SingleOrDefaultAsync(m => m.EventId == id);

        if (@event == null)
        {
            return NotFound();
        }

        return Ok(@event);
    }

    // PUT: api/Events/5
    [HttpPut("{id}")]
    public async Task<IActionResult> PutEvent([FromRoute] int id, [FromBody] Event @event)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        if (id != @event.EventId)
        {
            return BadRequest();
        }

        _context.Entry(@event).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!EventExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

    // POST: api/Events
    [HttpPost]
    public async Task<IActionResult> PostEvent([FromBody] Event @event)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        _context.Event.Add(@event);
        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateException)
        {
            if (EventExists(@event.EventId))
            {
                return new StatusCodeResult(StatusCodes.Status409Conflict);
            }
            else
            {
                throw;
            }
        }

        return CreatedAtAction("GetEvent", new { id = @event.EventId }, @event);
    }

    // DELETE: api/Events/5
    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteEvent([FromRoute] int id)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var @event = await _context.Event.SingleOrDefaultAsync(m => m.EventId == id);
        if (@event == null)
        {
            return NotFound();
        }

        _context.Event.Remove(@event);
        await _context.SaveChangesAsync();

        return Ok(@event);
    }

    private bool EventExists(int id)
    {
        return _context.Event.Any(e => e.EventId == id);
    }
}

[产生（“应用程序/json”）]
[路线（“api/事件”）]
公共类事件控制器：控制器
{
私有只读TIMyContext\u上下文；
公共事件控制器（TIMyContext上下文）
{
_上下文=上下文；
}
//获取：api/事件
[HttpGet]
公共IEnumerable GetEvent（）
{
返回_context.Event；
}
//获取：api/Events/5
[HttpGet（“{id}”）]
公共异步任务GetEvent（[FromRoute]int id）
{
如果（！ModelState.IsValid）
{
返回请求（ModelState）；
}
var@event=wait_context.event.SingleOrDefaultAsync（m=>m.EventId==id）；
如果（@event==null）
{
返回NotFound（）；
}
返回Ok（@event）；
}
//PUT:api/Events/5
[HttpPut（“{id}”）]
公共异步任务PutEvent（[FromRoute]int-id，[FromBody]Event@Event）
{
如果（！ModelState.IsValid）
{
返回请求（ModelState）；
}
如果（id！=@event.EventId）
{
返回请求（）；
}
_context.Entry（@event.State=EntityState.Modified；
尝试
{
wait_context.SaveChangesAsync（）；
}
catch（DbUpdateConcurrencyException）
{
如果（！EventExists（id））
{
返回NotFound（）；
}
其他的
{
投掷；
}
}
返回NoContent（）；
}
//发布：api/Events
[HttpPost]
公共异步任务PostEvent（[FromBody]Event@Event）
{
如果（！ModelState.IsValid）
{
返回请求（ModelState）；
}
_context.Event.Add（@Event）；
尝试
{
wait_context.SaveChangesAsync（）；
}
捕获（DbUpdateException）
{
if（EventExists（@event.EventId））
{
返回新的StatusCodeResult（StatusCodes.Status409Conflict）；
}
其他的
{
投掷；
}
}
返回CreateDataAction（“GetEvent”，new{id=@event.EventId}，@event）；
}
//删除：api/Events/5
[HttpDelete（“{id}”）]
公共异步任务DeleteEvent（[FromRoute]int id）
{
如果（！ModelState.IsValid）
{
返回请求（ModelState）；
}
var@event=wait_context.event.SingleOrDefaultAsync（m=>m.EventId==id）；
如果（@event==null）
{
返回NotFound（）；
}
_context.Event.Remove（@Event）；
wait_context.SaveChangesAsync（）；
返回Ok（@event）；
}
私有bool EventExists（int-id）
{
返回_context.Event.Any（e=>e.EventId==id）；
}
}

您能否尝试将

*ngIf=“events”

更改为

*ngIf=“events！=null”

？ 我认为

events

数组是在加载组件时创建的，因此for循环不处理任何数据。

---

对不起，如果我错了，我只想发表评论，但我没有这方面的声誉。

您的响应对象包含

camelCased

属性。但是您访问它们时，就好像它们是

PascalCased

一样。将

事件.EventID

更改为

事件.EventID

等等。

我认为接口属性和响应应该是相同的。与您的情况一样，密钥不同。您的应用程序是否正在编译…？构造函数中的道具没有访问器说明符…公共/私有？我已编辑并添加了我使用的类和控制器…是的，我的应用程序正在编译compiling@AshishRanjan没有

public

或

private

声明的构造函数参数对于构造函数。什么都没有改变。这正是我的意思，我希望组件的加载等待arrayso如果它不为null，我们可以尝试添加一个标志。如果将标志放在那里，而不是将数组放在*ngIf。你应该非常接近，因为我以前也是这样做的