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>

声明了样本数据。我可以使用邮递员看到它们：

如果有人能提供一些帮助，我将非常感谢。感谢您的宝贵时间。

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

能否请您将*ngIf="events"更改为*ngIf="events!=null"？我认为events数组是在加载组件时创建的，因此for循环无法处理任何数据。抱歉，如果我错了，我只想发表评论，但我对此没有声誉。

Answer 2

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

AspNet Core Angular * NgFor不显示数据

2 个答案: