将组件实例绑定到循环中的元素

Question

所以基本上这是一个带有面板的仪表板页面(拖放来自名为StackBlaze的GitHub库的项目，我确信这不是问题的原因，因为我尝试删除了相关的标签，但问题仍然存在(。我的面板列表由Panel类的对象组成，每个面板都有一个名为AddEditPanel的关联组件，该组件在这些拖放项中呈现。在从屏幕上动态删除任何面板时，它应该从屏幕上完全删除，但实际发生的情况是，该面板获得了其他面板的AddEditPanel组件，即列表中元素和相关组件实例的绑定受到干扰。

代码段：

<StackBlazeGrid>
@foreach (var panel in panels)
{
<StackBlazeItem PanelId="@panel.Id" OnUpdate="GSUpdateHandler" Options="panel.ItemOptions">
<div class="d-flex flex-column h-100 ">
<div class="d-flex p-2 pl-4" style="background-color: #d3d3d387;">
<div class="label-heading align-items-center justify-content-center">
<div class="d-flex flex-column">
<span style="font-weight: 600;">@GetCurrentWidget(panel).Title : @GetCurrentMetric(panel).Title <span>(</span> @if(!String.IsNullOrEmpty(@panel.Title)) {@panel.Title} <span>)</span> </span>
</div>
</div>
<div class="d-flex align-items-center justify-content-center icon-edit ">
<img class=" pointer mr-2" data-toggle="tooltip" title="Alarm" src="img/common/alarm.svg" @onclick="@(() => OnAddEditAlarm(panel))" style="width: 20px; height: 20px;margin-top: 1px;">
@if (panel.EditMode != true)
{
<img class=" pointer mr-2" data-toggle="tooltip" title="Edit" src="img/common/edit.svg" @onclick="@(async() => {await RemoveChartForPanel(panel);panel.EditMode=true;} )" style="width: 20px; height: 20px;">
}
else
{
<img class=" pointer mr-2" data-toggle="tooltip" title="Save Changes" src="img/common/select-client.svg" @onclick="@(async() => {await panel.childPanel.HandleValidSubmit();})" style="width: 21px; height: 21px;">
}
<img class=" pointer" src="img/common/trash-can.svg" @onclick="@(async() => {panel.childPanel.RemoveWidget(); deletePanel=panel; deleteModalRef.Show();})">
</div>
</div>
<IoTWeb.Components.Forms.AddEditPanel @ref="panel.childPanel" widgets="widgets" metrics="metrics" payload="panel" OnEditWidget="OnEditPanelHandler" WMMList="widgetMetricMappingList"></IoTWeb.Components.Forms.AddEditPanel>
</div>
</StackBlazeItem>
}
</StackBlazeGrid>

基本上，我想要一种将AddEditPanel组件直接绑定到循环中的面板的方法

Answer 1

使用@key=panel

@foreach (var panel in panels)
{
<StackBlazeItem @key=panel PanelId="@panel.Id" OnUpdate="GSUpdateHandler" Options="panel.ItemOptions">
...

文档