(Blazor) Дочерний компонент не отображается

Question

Я создал компонент Dialog, используя Syncfusion, и я пытаюсь вызвать его из родительского компонента, но не отображает его.

Это мой родительский компонент, и здесь я использую @ref в моем дочернем компоненте (ModalAcceptCancel), поэтому когда я нажимаю кнопку удаления (в своей сетке), я могу вызвать метод с именем OpenDialog для визуализации или отображения моего модального окна.

@using App.Dtos
@using App.Data
@using Syncfusion.Blazor.Buttons
@inject NavigationManager NavigationManager

//This is my child component
<ModalAcceptCancel @ref="Modal"/>
//
<SfGrid @ref="SfGridProfesores" DataSource="@DsProfesores" AllowPaging="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProfesorDto.Id) HeaderText="Identificador" TextAlign="TextAlign.Right" Width="120">
        </GridColumn>
        <GridColumn Field=@nameof(ProfesorDto.Nombres) HeaderText="Nombre" Width="200"></GridColumn>
        <GridColumn Field=@nameof(ProfesorDto.CorreoElectronico) HeaderText="Correo Electrónico" Width="150"></GridColumn>
        <GridColumn HeaderText="Acciones" TextAlign="TextAlign.Center" Width="120">
            <Template>
                @{
                    var profesor = (context as ProfesorDto);             
                    <SfButton @onclick="@(() => NavigationManager.NavigateTo("Profesor/"+profesor.Id))" CssClass="e-info">Editar</SfButton>
                    <SfButton CssClass="e-danger" @onclick="(() => DeleteProfesor(profesor.Id))">Borrar</SfButton>                                  
                }
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {
    [Parameter]
    public IReadOnlyList<ProfesorDto> DsProfesores { get; set; }

    [Inject]
    public IProfesorService ProfesorService { get; set; }

    SfGrid<ProfesorDto> SfGridProfesores;

    ModalAcceptCancel Modal; 

    //Here i try to open my Modal (ChildComponent)
    private void DeleteProfesor(int id)
    {
        Modal.OpenDialog();
        //ProfesorService.BorraProfesor(id);
       // SfGridProfesores.Refresh();
    }
}

Это код моего дочернего компонента. Видимость моего диалогового окна Syncfusion привязана к свойству «Видимо», когда вызывается метод OpenDialog, свойство изменяется на true, и оно должно отображать мой модальный.

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons


<SfDialog Width="500px" ShowCloseIcon="true" CloseOnEscape="true" @bind-Visible="@IsVisible">
    <DialogTemplates>
        <Header> Atención </Header>
        <Content> ¿Estás seguro que deseas eliminar este elemento? </Content>
        <FooterTemplate>
            <SfButton CssClass="e-primary e-flat" @onclick="@CloseDialog">
                Aceptar
            </SfButton>
            <SfButton CssClass="e-flat" @onclick="@CloseDialog">
                Cancelar
            </SfButton>
        </FooterTemplate>
    </DialogTemplates>
</SfDialog>

@code {
    private bool IsVisible { get; set; } = false;

    public void OpenDialog()
    {
        this.IsVisible = true;
    }

    public void CloseDialog()
    {
        this.IsVisible = false;
    }
}

¿Что я делаю не так? ¿Есть ли лучший способ сделать это?

Я новичок в разработке. Извините за мой engli sh.

Answer 1

Привет от службы поддержки Syncfusion,

Мы проверили ваш запрос и общие блоки кода. Свойство IsVisible вызывается с другой страницы бритвы, поэтому SfDialog не влияет на изменения свойств, поэтому он не отображается. Мы предлагаем вам вызвать StateHasChanged () рядом с обновлением свойства, чтобы решить указанную проблему. Мы также подготовили образец, который пытается удовлетворить ваши требования.

Образец: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFDIAL~22087980339

Сообщите нам, если решение поможет,

С уважением,

Индраджит

Answer 2

Это код, который должен вызывать модальное окно, верно?

 @onclick="(() => BorrarProfesor(profesor.Id))"

Вам нужен этот код:

@onclick="(() => DeleteProfesor(profesor.Id))"

, который вызывает метод DeleteProfesor, передавая его профессору id, из которого Modal.OpenDialog(); извлекается ...

Определите как DeleteProfesor следующим образом:

//Here i try to open my Modal (ChildComponent)
    private async void DeleteProfesor(int id)
    {
        Modal.OpenDialog();
        //ProfesorService.BorraProfesor(id);
       // SfGridProfesores.Refresh();
    }

Надеюсь, это поможет! Если вы застряли, дайте мне знать