Mat Blazor扩展面板说明动态内容

Question

我试图通过循环调用子组件来绑定的内容。该子组件包含要显示的数据列表。

循环中有多个Mat Expansion面板，每个MatExpansionPanelDetails的子组件数据都不同。

但是，每当我从子组件加载面板时，所有面板扩展详细信息都会更改为展开的详细信息。

附加了子组件和父组件数据

父项：

   <div class="panel" style="overflow:auto;height:100%;">

<button @onclick="RefreshGrid">Refresh</button>

<MatAccordion Multi="true">
    @foreach (Venue v in VenueList)
    {
        <MatExpansionPanel ExpandedChanged="@(e => OnVenueExpanded(e, v.VenueUkey))" @ref="GridVenue" data-Id="@v.VenueUkey" >
            <MatExpansionPanelSummary Style="border:1px solid #6c757d73">
                <MatExpansionPanelHeader><span><MatIcon Icon="house" Style="color:deepskyblue"></MatIcon>@v.VenueName</span></MatExpansionPanelHeader>
            </MatExpansionPanelSummary>
            <MatExpansionPanelDetails Id="@v.VenueUkey.ToString()">

                @if (VenueExpandedState && FilteredDevices[0].VenueUkey==v.VenueUkey)
                {
                    <div>
                        <ul>
                            <li>
                                <div class="col s12 venu-list-container" id=@v.VenueUkey>
                                    @foreach (Device d in FilteredDevices)
                                    {

                                        <NetworkMonitorDevices VenueUKey="@v.VenueUkey" @ref="Nmd" isExpanded="@VenueExpandedState" d="@d"/>

                                    }
                                </div>
                            </li>

                        </ul>
                    </div>
                }

                </MatExpansionPanelDetails>
        </MatExpansionPanel>
    }

</MatAccordion>

@code {

public MatExpansionPanel GridVenue;
public bool VenueExpandedState { get; set; } = false;

List<long> ExpandedVenues = new List<long>();
List<Venue> VenueList = new List<Venue>();

protected override async Task OnInitializedAsync()
{
    VenueList = await MonitorService.GetVenuesAsync();
    Device = await MonitorService.GetNetworkMonitorDeviceData();
}
 List<Device> Device = new List<Device>();
List<Device> FilteredDevices = new List<Device>();

public void GetData(long venue)
{

    FilteredDevices = Device.Where(e => e.VenueUkey == venue).ToList();
} 

public void RefreshGrid()
{

}

public void OnVenueExpanded(bool Expanded, Int64 Venue)
{
    if (Expanded)
    {
        ExpandedVenues.Add(Venue);
        VenueExpandedState = true;
        GetData(Venue);
        StateHasChanged();

    }
    else
    {
        ExpandedVenues.Remove(Venue);
    }
    //  StateHasChanged();


}

}

子组件：

  <div id="@VenueUKey"  style="visibility:@isExpanded" data-id="@d">



    @if (d.DeviceType == "TC")
    {
        <div class="venu-list-btn btn" style="cursor:pointer;background-color:;color:@d.ReportedState">@d.SpotName<i class='material-icons'>play_arrow</i></div><div class="venu-list-div" id=" @d.SpotId + TC">
        </div>
    }
    @if (d.DeviceType == "RT")
    {

        <div style="background-color:@d.ReportedState; color:black"
             class='venu-list-btn btn' id=" @d.DeviceID +  MCD">
            @d.SpotName<i class="material-icons">play_arrow</i>
        </div>

    }
    else
    {


    }
    @if (d.DeviceType == "VLT")
    {
        <span class="venu-list-bar" style="cursor:pointer;background-color:@d.ReportedState;color:BLACK " title=@d.SpotName id=@d.DeviceID>VLT</span>
    }
</div>

@code {

int VenueUKeyClicked { get; set; }



[Parameter] public bool isExpanded { get; set; }
[Parameter] public long VenueUKey { get; set; }
[Parameter] public EventCallback<Venue> onExpand { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }

[Parameter] public EventCallback onLoad { get; set; }
[Parameter]
public Device d { get; set; }

List<Device> Device = new List<Device>();
List<Device> FilteredDevices = new List<Device>();

public async Task GetData(long venue)
{
       Device = await MonitorService.GetNetworkMonitorDeviceData();
       FilteredDevices = Device.Where(e => e.VenueUkey == venue).ToList();
       StateHasChanged();
}