引导程序4：活动类是否未附加到轮播项目？

Question

我正在尝试使用Bootstrap 4的轮播，尽管它没有随机将活动类添加到第一个元素？这种情况偶尔会发生，图像的第一次迭代通常是可以的，并且通过第3或第4次迭代，活动类无法添加到具有类carousel-item的第一个dom元素中，就像有时候那样应该。

我正在使用Blazor ServerSide渲染轮播。这曾经在我的应用程序中起作用，但此后我做了一些使其出错的事情。

Index.razor：

@page "/"

@using CascadeMobileUtility.Database.Dao
@using CascadeMobileUtility.Entities
@using CascadeMobileUtility.Data
@inject ScraperCollectionDao ScraperCollectionDao;
@inject ScraperProfileDao ScraperProfileDao;
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime;
@inject SettingsRepository SettingsRepository;


@if (!fetchedRequiredData)
{
    <p><em>Loading...</em></p>
}
else if (collections == null || scraperProfile == null)
{
    <p>We couldn't find any records right now.</p>
}
else
{
    <button class="btn btn-danger btn-block mt-2" @onclick="(x => UndoLastCollectionEntry())">Undo last collection entry</button>
    <hr />
    <p>
        <b>@TruncateIfTooLong(scraperProfile.Name) @profileAgeBadge</b> <span class="float-right">@scraperProfile.Media.Count() images</span>
    </p>
    <div id="carouselExampleIndicators" class="carousel">
        <ol class="carousel-indicators">
            @for (var i = 0; i < scraperProfile.Media.Count(); i++)
            {
                <li data-target="#carouselExampleIndicators" data-slide-to="@i" class="@(i == 0 ? "active" : "")"></li>
            }
        </ol>
        <div class="carousel-inner">
            @for (var x = 0; x < scraperProfile.Media.Count(); x++)
            {
                <div class="carousel-item@(x == 0 ? " active" : "")">
                    <img class="d-block w-100" src="@scraperProfile.Media[x].CdnUrl" alt="First slide">
                </div>
            }
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


    <div class="form-row">
        @foreach (var collection in collections)
        {
            <div class="col-6">
                <button data-id="@collection.Id" class="btn btn-primary btn-block collection-button" type="submit" @onclick="@(x => CreateCollectionEntry(collection.Id))">@collection.Name</button>
            </div>
        }
    </div>
}

@code {
    private List<CascadeMobileUtility.Entities.ScraperCollection> collections;
    private ScraperProfile scraperProfile;
    private bool fetchedRequiredData;
    private MarkupString profileAgeBadge;

    protected override async Task OnInitializedAsync()
    {
        collections = ScraperCollectionDao.GetAllCollections();
        FetchAndAssignProfile();

        fetchedRequiredData = true;

        if (scraperProfile.AgeGuessed != 0)
        {
            profileAgeBadge = new MarkupString("<span class=\"badge badge-primary\">" + scraperProfile.AgeGuessed + "</span>");
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && SettingsRepository.GetInt("auto_swipe_through_profile_images") == 1)
        {
            JSRuntime.InvokeVoidAsync("swipeThroughProfileImages", new object[0]);
        }
    }

    private async void CreateCollectionEntry(int collectionId)
    {
        await ScraperCollectionDao.CreateCollectionEntry(collectionId, scraperProfile.Id);
        FetchAndAssignProfile();
    }

    private async void UndoLastCollectionEntry()
    {
        ScraperCollectionDao.UndoLastEntry();
        FetchAndAssignProfile();
    }

    private string TruncateIfTooLong(string str) {
        return str.Length >= 28 ? str.Substring(0, 28) : str;
    }

    private void FetchAndAssignProfile()
    {
        scraperProfile = ScraperProfileDao.GetProfileWithoutCollection(
            SettingsRepository.GetInt("filter_profiles_minimum_media_items"),
            SettingsRepository.GetInt("filter_profiles_minimum_age"));
    }
}