Forms：FormItem不会根据if条件重新出现

Question

我对 blazor 和网络开发人员来说都很陌生，几天来一直在努力解决这个问题。 我改变了这个标题，因为问题转移了。

我有一个自定义剃刀组件，我在其中使用绑定到模型中的枚举类型对象的Telerik单选组，例如模型.城市.

<TelerikRadioGroup Data="@Data"
                           @bind-Value="@Model.City"
                           OnChange="@OnChangeHandler">

在我的 razor cs 文件中，我有一个布尔属性 (HasCinema)，它取决于此枚举值：

    HasCinema = Model.City is not (City.One or City.Two);

此属性在初始化时设置（在 OnInitialized() 中），当然也在 OnChangeHandler(object city) 中重新设置。

async Task OnChangeHandler(object city) //is called 
    {
        HasCinema = city is not (City.One or City.Two);
        //StateHasChanged(); should not be needed when OnChangeHandler is a EventCallback

    }

在我的 razor 组件的 html 部分中，我有以下 if 语句：

@if (HasCinema)
{
    <FormItem Field="@nameof(Model.Cinema)">
        <Template>
            <AnotherComponent For="@(() => Model.Cinema)" />

            <TelerikTextBox Id="state" Size="sm" Placeholder=""
            @bind-Value="@Model.Cinema"> </TelerikTextBox>
        </Template>
    </FormItem>
}

这个想法显然是这部分仅根据广播组中所选城市的显示和消失。

我看到布尔值 HasCinema 成功地在 True 和 False 之间变化，具体取决于所选的单选按钮以及模型中的绑定值。

当前行为： 在最初的渲染中，如果默认选择的 City 为 HasCinema 生成 True，则 FormItem 将按预期显示。当用户选择另一个城市时，将产生 HasCinema == False，该组件将按预期消失。不过，从此以后，它就不会再出现了。所以从 False ==> True 的转换似乎不再起作用了。

更新： 嘿，多亏了 @Rbee 的示例，我发现 FormItem 没有显示，因为我没有“else”语句。当我像这样添加 else 块时：

else 
{
     <p> blah blah </p>
}

它有效，FormItem 和段落会随着 True 和 False 的变化而变化 - 尽管它确实由于某种原因弄乱了 FormItems 的顺序。但是，我需要它无缝地出现和消失，而不是被另一个项目取代？

Answer 1

您可以切换

visibility

的

FormItem

css 属性。

<style>
    .hidden-item{
        visibility: hidden;
    }
</style>

<FormItem Class="@(_hasCinema?"hidden-item":"")" Field="@nameof(Model.Cinema)">
    <Template>
        <AnotherComponent For="@(() => Model.Cinema)" />

        <TelerikTextBox Id="state" Size="sm" Placeholder=""
        @bind-Value="@Model.Cinema"> </TelerikTextBox>
    </Template>
</FormItem>

Telerik 片段

不要忘记在

Cinema

属性为 null 时处理这种情况。 也许仅在项目不为空时才渲染该项目。