为什么 AngularJS html 元素响应 null

Question

刚开始学习AngularJS。我正在尝试使用 AspNet Boilerplate MVC/AngularJS 模板创建一个简单的项目。我可以在网络上看到我的 GetAll XHR 结果在我请求的查询中成功 true，但是 Chrome 元素中的 div 为空（它们有 after/before个元素）。

Index.js

(function () {
    angular.module('app').controller('app.views.events.index', [
        '$scope', '$uibModal', 'abp.services.app.event',
        function ($scope, $uibModal, eventService) {
            var vm = this;

            vm.events = [];
            vm.filters = {
                includeCanceledEvents: false
            };

            function getEvents() {
                eventService.getAll(vm.filters).then(function (result) {
                    vm.events = result.items;
                });
            }

            getEvents();
        }
    ]);
})();

Index.cshtml

<div class="row clearfix" ng-controller="app.views.events.index as vm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="body table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>@L("Title")</th>
                            <th>@L("Description")</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="event in vm.events">
                            <td>{{event.title}}</td>
                            <td>{{event.description | characters:100}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

EventAppServis.cs

    [AbpAuthorize]
public class EventAppService : TradegramAppServiceBase, IEventAppService
{
    private readonly IEventManager _eventManager;
    private readonly IRepository<Event, Guid> _eventRepository;

    public EventAppService(
        IEventManager eventManager, 
        IRepository<Event, Guid> eventRepository)
    {
        _eventManager = eventManager;
        _eventRepository = eventRepository;
    }

    public async Task<ListResultDto<EventListDto>> GetAll(GetEventListInput input)
    {
        var events = await _eventRepository
            .GetAll()
            .Include(e => e.Registrations)
            .WhereIf(!input.IncludeCanceledEvents, e => !e.IsCancelled)
            .OrderByDescending(e => e.CreationTime)
            .Take(64)
            .ToListAsync();

        return new ListResultDto<EventListDto>(events.MapTo<List<EventListDto>>());
    }

    public async Task<EventDetailOutput> GetDetail(EntityDto<Guid> input)
    {
        var @event = await _eventRepository
            .GetAll()
            .Include(e => e.Registrations)
            .Where(e => e.Id == input.Id)
            .FirstOrDefaultAsync();

        if (@event == null)
        {
            throw new UserFriendlyException("Could not found the event, maybe it's deleted.");
        }

        return @event.MapTo<EventDetailOutput>();
    }

    public async Task Create(CreateEventInput input)
    {
        var @event = Event.Create(input.Title, input.Date, input.Description, input.MaxRegistrationCount);
        await _eventManager.CreateAsync(@event);
    }

    public async Task Cancel(EntityDto<Guid> input)
    {
        var @event = await _eventManager.GetAsync(input.Id);
        _eventManager.Cancel(@event);
    }

    public async Task<EventRegisterOutput> Register(EntityDto<Guid> input)
    {
        var registration = await RegisterAndSaveAsync(
            await _eventManager.GetAsync(input.Id),
            await GetCurrentUserAsync()
            );

        return new EventRegisterOutput
        {
            RegistrationId = registration.Id
        };
    }

    public async Task CancelRegistration(EntityDto<Guid> input)
    {
        await _eventManager.CancelRegistrationAsync(
            await _eventManager.GetAsync(input.Id),
            await GetCurrentUserAsync()
            );
    }

    public async Task Delete(EntityDto<Guid> input)
    {
        var @event = await _eventManager.GetAsync(input.Id);
        await _eventManager.DeleteAsync(@event);
    }

    private async Task<EventRegistration> RegisterAndSaveAsync(Event @event, User user)
    {
        var registration = await _eventManager.RegisterAsync(@event, user);
        await CurrentUnitOfWork.SaveChangesAsync();
        return registration;
    }
}

感谢任何帮助。

Answer 1

响应对象 result 不包含 data。您必须使用 result.items 而不是 result.data.items。

function getEvents() {
    eventService.getAll(vm.filters).then(function (success) {
        vm.events = result.items;
    },function (error){

   });
}

Answer 2

您可以使用以下代码更改 getEvents()。这里 Response 对象结果包含 data。您必须使用 result.data.items 而不是 result.items。

        function getEvents() {
            eventService.getAll(vm.filters)
                .then(function (result) {
                    vm.events = result.data.items;
                });
        }

为什么 AngularJS html 元素响应 null

Why AngularJS html element response null

html

javascript

angularjs

aspnetboilerplate