blazor webassembly - 动态生成 html 个对象的列表，它们有自己的显示/隐藏按钮

Question

我希望我动态生成的每张卡片都有自己的可点击插入符号，以展开有关该对象的更多详细信息。

到目前为止我试过的方法没有用，也没有抛出任何错误：

@foreach (Person person in people)
{
    bool showFullDetails = false;
    <div class="card">
        <div class="card-body">
            <span @onclick="()=> showFullDetails = !showFullDetails" class="@(showFullDetails ? "oi oi-chevron-down" : "oi oi-chevron-right")"></span>

            <span>@person.Type.TypeName</span>
            <span>@person.FirstName @person.LastName</span>

            @if (showFullDetails)
            {
               <div>@person.Age  - @person.Email</div>
            }
        </div>
    </div>
}

Answer 1

你不能像那样在 blazor 中定义工作变量。它们必须在 @code 部分中指定。所有变量都需要预先定义。以下是您如何展示它的两个示例。

一次一个：

<span @onclick="HideShowPerson" class="@(showFullDetails ? "oi oi-chevron-down" : "oi oi-chevron-right")"></span>


@if (ShownPerson == person)
{
    ...
}

@code {
    Person ShownPerson = null;
    
    void HideShowPerson(Person person) {
        
        // Check if person is assigned
        if (ShownPerson = person)
        {
            ShownPerson = null;
        } else {
            ShownPerson = person;
        }
    }
}

如果要同时显示多个

@if (personList.Contains(person))
{
    ...
}

@code {
    // Person List
    List<Person> personList = new List<Person>();
    
    void HideShowPerson (Person person) 
    {
        if (personList.Contains(person))
        {
            personList.Remove(personList);
        } else {
            personList.Add(personList);
        }
    }
}