2

在我的 blazor 应用程序中，我有一个组件，它有一个按钮和一个由按钮控制的引导折叠。当我只在一个页面上使用该组件一次时，一切正常，但如果我在一个页面上多次使用它，那么一个按钮也将触发另一个中的折叠元素，因为它们的 ID 似乎是静态的。有没有解决的办法？

这是组件的代码

<button class="btn btn-primary form-control" type="button" data-toggle="collapse" data-target="#divCollapse" aria-expanded="false" aria-controls="divCollapse">
    @Technician.Name
</button>
<div class="collapse" id="divCollapse">
    <div class="card card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Assigned To</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var task in _repo.GetTasksByTechnician(Technician).ToList())
                {
                    <tr>
                        <td>@task.Id</td>
                        <td>@task.AssignedTo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

@code {
    [Parameter]
    public Technician Technician { get; set; }

}

这是我用来创建组件的页面中的代码：

@foreach (var tech in _technicians)
{
    <PersonComponent Technician="@tech"></PersonComponent>   
}
4

1 回答 1

1

您必须为您的组件可折叠部分分配一个唯一的 ID。现在您已经在页面上以许多具有相同 id 的 html 元素结束，这在语法上是不正确的，这就是 Bootstrap 无法完成工作的原因。

所以你可以尝试这样做：

<button class="btn btn-primary form-control" type="button" data-toggle="collapse"
        data-target="#divCollapse@(Technician.Id)" aria-expanded="false" aria-controls="#divCollapse@(Technician.Id)">
      @Technician.Name
</button>
<div class="collapse" id="divCollapse@(Technician.Id)">

etc...

假设每个技术人员都应该有一个 ID，或者只是放置任何唯一标识他们每个人的属性，并且可以附加到“#divCollapse”字符串以创建一个语法良好的 id（除下划线或连字符）。

如果 Technician 实体没有合适的属性，只需在组件中定义另一个参数并从外部注入它：

@for (int idx = 0; idx < _technicians.Length; idx++)
{
    int capturedIdx = idx; // <- Necessary to get the loop variable to the context
    <PersonComponent Technician="@tech" Identifier="@capturedIdx"></PersonComponent>   
}

当然在你的组件中：

[Parameter]
public int Identifier { get; set; }

然后您可以使用它附加到“divCollapse”ID。

希望能帮助到你！

于 2020-06-25T11:03:42.110 回答