AspNet Core Angular * NgFor不显示数据

Question

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

空表：

我的.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;
}

我的.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>

声明样本数据。我可以看到他们使用Postman：

如果有人可以解释一下，真的很感激。谢谢你的时间。

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

控制器：

[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);
    }
}

Answer 1

您的响应对象包含camelCased属性。但你访问它们就好像它们是PascalCased。将event.EventID改为event.eventId等。

Answer 2

你可以尝试将*ngIf="events"改为*ngIf="events!=null"吗？我认为events数组是在加载组件时创建的，因此for循环不会处理任何数据。对不起，如果我错了，我只想评论，但我没有声誉。