Панель расширения Mat Blazor Описание Dyanmic Содержимое - PullRequest
Новая
       87

Панель расширения Mat Blazor Описание Dyanmic Содержимое

0 голосов
/ 08 октября 2019

Я пытаюсь связать содержимое, вызывая дочерний компонент в цикле. Этот дочерний компонент содержит список данных, которые должны быть показаны.

В цикле есть несколько панелей расширения Mat, и каждый 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();
}
...