Цвет фона карты на основе содержимого карты - почему пропускает первую карту? - PullRequest
Новая
       5

Цвет фона карты на основе содержимого карты - почему пропускает первую карту?

0 голосов
/ 31 марта 2020

Я пытаюсь изменить цвет фона карты в зависимости от содержимого, но она пропускает первую карту / div. Как предотвратить пропуск первой карты при установке цвета фона? Blazor Fiddle 

@foreach (TimeLog time in timeList)
{
    <div class="largeCard" id="cardstyle" style="background-color: @cardColour ">
        <div>
            @if (time.LogType == "Work") cardColour = "#06065c";
            else cardColour = "#5c0606";
            <h6>@time.LogType</h6>
        </div>
    </div>
}

@code {

    List<TimeLog> timeList = new List<TimeLog>();
    TimeLog times = new TimeLog();    
    string cardColour;

    public class TimeLog
    {
        public string LogType { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        times = new TimeLog();
        times.LogType = "Work";
        timeList.Add(times);
        times = new TimeLog();
        times.LogType = "Vacation";
        timeList.Add(times);
        times = new TimeLog();
        times.LogType = "Work";
        timeList.Add(times);
        times = new TimeLog();
        times.LogType = "Work";
        timeList.Add(times);
        times = new TimeLog();
        times.LogType = "Vacation";
        timeList.Add(times);
        times = new TimeLog();
        times.LogType = "Work";
        timeList.Add(times);
    }
}

1 Ответ

1 голос
/ 31 марта 2020

Вы должны окружить свой элемент div оператором if или просто поместить оператор if перед элементом div. Он пропускает его, потому что ваш if оценивается после использования переменной cardColour. Таким образом, нужно сбросить цвет всех ваших карт на 1. 

        @if (time.LogType == "Work") cardColour = "#06065c";
        else cardColour = "#5c0606";
<div class="largeCard" id="cardstyle" style="background-color: @cardColour ">
    <div>

        <h6>@time.LogType</h6>
    </div>
</div>
...