如何动态更改 blazor 组件

Question

我需要更改列表中的项目，列表是一个显示数字的组件，但它的编号取决于另一个名为 component2 的组件，如果 component2 更改她的值，component1 应该重置并更改为新的数字。 component2 是另一个列表。

这是组件 1 :


<div>
    <div class="d-flex listbox-box" @onclick="DropDown" style="height:@(height)px !important; width:@(width)px !important;padding:0px;">

        @if (ItemIsSelected)
        {
            <IterationItem height="@height" width="@width" _Iteration="Iteration[SelectedIndex]" />
        }else{
        <div class="align-self-center" style="width:100%;">
            <div class="float-end">
                <div class=" icon-container" style="transform: rotate(@(rotation)deg) !important;">
                    <i class="bi bi-chevron-compact-down icon-listbox"/>
                </div>
            </div>
        </div>
        }


      </div>
    @if (ShowDropDown && Iteration != null)
    {
            <div class="example dropdown-listbox" style="width:@(width)px !important;height:@(height * 3)px !important">
            @for (int i = 0; i < Iteration.Length-1; i++)
            {
                var index = i;
                        <div id="@i" value="@SelectedIndex" @onclick='eventargs => HandleValueChange(eventargs,index)'>
                            <IterationItem height="@height" width="@width" _Iteration="Iteration[i]" />
                        </div>
                        <hr class="listbox-item-separator"/>
            }
            </div>
    }
</div>

@code {
    int rotation = 0;
    [Parameter] public int SelectedIndex { get; set; } = -1;
    [Parameter] public bool ShowDropDown { get; set; } = false;
    [Parameter] public bool ItemIsSelected { get; set; } = false;
    [Parameter] public Iteration[] Iteration { get; set; }
    public int height { get; set; } = 40;
    public int width { get; set; } = 120;


    private void DropDown()
    {
        ShowDropDown = ShowDropDown ? false : true;

        if (ShowDropDown)
        {
            rotation = 180;
        }
        else
        {
            rotation = 0;
        }
    }

    protected void HandleValueChange(MouseEventArgs evt, int index)
    {
        SelectedIndex = index;
        DropDown();
        ItemIsSelected = true;

    }


}

这是交换数字的事件：

    void ClickHandler(int num)
    {
        _modelValue = num;
        _selectedModel =   
     XqueryFunctions.CreatrModelById(_modelValue,"");
    }

这就是我现在尝试更改它的方式：

<ListBoxIteration Iteration="@_selectedModel.Iterations" />

@code {
    private string ProyectName { get; set; } = "Fred";
    int _modelValue;
    Model _selectedModel = new ();
    void ClickHandler(int num)
    {
        _modelValue = num;
        _selectedModel =   
        XqueryFunctions.CreatrModelById(_modelValue,"");
    }
}

Answer 1

此代码有效，我遇到了其他问题。我应该删除这个 post ?

如何动态更改 blazor 组件

How to change dynamically a blazor component

asp.net

blazor

blazor-webassembly

asp.net-blazor