Пользовательский компонент Blazor неправильно отражает привязку

Question

у меня большой DxFormLayoutсо многими s и каждый DxFormLayoutGroupимеет много с. Мне интересно, можно ли сжать код бритвы, составив несколько компонентов DxFormlauoutItemс. Вот мой код:

Страница:

      <EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />

    <DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
        <DxFormLayoutGroup Caption="Options" ColSpanMd="12">
            <DxFormLayoutItem Caption="" ColSpanMd="12">
                @*The below is repeated multiple times*@
                <Template>
                    <DxStackLayout ItemSpacing="10px">
                        <Items>
                            <DxStackLayoutItem Length="95%">
                                <Template>
                                    <DxTextBox ReadOnly="true" @bind-Text="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
                                               title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" SizeMode="SizeMode.Medium"/>
                                </Template>
                            </DxStackLayoutItem>
                            <DxStackLayoutItem Length="5%">
                                <Template>
                                    <div class="stacklayout-item">
                                        <DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@_model.IsNegotiationsDoneBySupplyManagement"
                                                    Alignment="CheckBoxContentAlignment.Center" title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"/>
                                    </div>
                                </Template>
                            </DxStackLayoutItem>
                        </Items>
                    </DxStackLayout>
                </Template >
                @*The above is repeated multiple times*@
            </DxFormLayoutItem >
        </DxFormLayoutGroup>            
    </DxFormLayout>
</EditForm>

@*The below become a component with parameters and bindings*@

<EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />

    <DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
        <DxFormLayoutItem Caption="" ColSpanMd="12">
            <Template>
                <BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
                                                   DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />
            </Template >
        </DxFormLayoutItem >            
    </DxFormLayout>
</EditForm>

Составная часть:

      <style>
    .stacklayout-item {
        text-align: center;
        height: 100%;
        padding-top: 6px;
    }
</style>

<DxStackLayout ItemSpacing="10px">
    <Items>
        <DxStackLayoutItem Length="95%">
            <Template>
                <DxTextBox ReadOnly="true" @bind-Text="@DecisionText" title="@DecisionText" SizeMode="SizeMode.Medium"/>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="5%">
            <Template>
                <div class="stacklayout-item">
                    <DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@DecisionResult"
                                Alignment="CheckBoxContentAlignment.Center" title="@DecisionResult"/>
                </div>
            </Template>
        </DxStackLayoutItem>
    </Items>
</DxStackLayout>

@code {
    [Parameter]
    public string DecisionText
    {
        get => _decisionText;
        set
        {
            if (_decisionText == value) return;

            _decisionText = value;
            DecisionTextChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public bool DecisionResult
    {
        get => _decisionResult;
        set
        {
            if (_decisionResult == value) return;

            _decisionResult = value;
            DecisionResultChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public EventCallback<string> DecisionTextChanged { get; set; }
    [Parameter]
    public EventCallback<bool> DecisionResultChanged { get; set; }

    private string _decisionText;
    private bool _decisionResult;
}

Проблема:

Я сделал его компонентом бритвы, но у меня проблема, так как свойства модели не обновляются на главной странице. Я могу подтвердить это одним свойством: на странице есть элемент, который включается один раз. model.IsNegotiationsDoneBySupplyManagementустановлено значение «истина». Этого больше не происходит, когда я перешел в компонентный режим:

      <DxSpinEdit Id="amountSavedAfterNegotiations" @bind-Value="@_model.SavingsAfterNegotiations" Enabled="@_model.IsNegotiationsDoneBySupplyManagement" title="Savings (AED) after negotiations?" />

Когда у меня был исходный код (без компонента/самого верхнего кода, который я вставил), установка этого флажка переключала состояние SpinEdit. После того, как я перешел на компонент, Enabledсостояние больше не воспринимает изменения в свойстве , что заставляет меня поверить, что modelсвойства на странице не обновляются.

Что не так с тем, как я подключил компонент?

Answer 1

Недостающая магия была на странице, где я вызывал компоненты. Вот что я делал:

      <BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

Это правильный синтаксис:

      <BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" @bind-DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

я должен был изменить DecisionResultк @bind-DecisionResult. Сейчас Pageх modelотражает изменения, происходящие в его свойствах с компонентом.