AspNet Core Angular * NgFor не отображает данные - PullRequest
Новая
       22

AspNet Core Angular * NgFor не отображает данные

0 голосов
/ 06 сентября 2018

У меня есть одна проблема, связанная с отображением данных с помощью ngfor. Вполне вероятно, что страница «отображает» данные перед загрузкой, поэтому таблица пуста. Я хотел бы отложить это, но я не знаю, как.

Пустые таблицы: enter image description here

Мой .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>

Пример данных объявляется. Я могу видеть их, используя Почтальон: enter image description here

Буду очень признателен, если кто-нибудь сможет пролить свет. Спасибо за ваше время.

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

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Ваш объект ответа содержит camelCased свойств. Но вы получаете к ним доступ, как если бы они были PascalCased. Измените event.EventID на event.eventId и т. Д.

0 голосов
/ 06 сентября 2018

Можете ли вы попробовать изменить *ngIf="events" на *ngIf="events!=null"? Я думаю, что массив events создается при загрузке компонента, поэтому цикл for работает без данных. Извините, если я ошибаюсь, я хотел только прокомментировать, но у меня нет репутации за это.

...