.net 如何从Blazor中的另一个组件重新渲染另一个组件?

fcwjkofz  于 2022-11-26  发布在  .NET
关注(0)|答案(1)|浏览(170)

基本上,我有一个期刊表Web应用程序,看起来像这样:

当我点击一个系列(在屏幕顶部中心的那些),我希望每个元素,不属于这个系列的一部分,以降低其亮度。
我是这样做的:
HeaderView.razor:

[Parameter, EditorRequired] public List<ElementDataModel> ElementDataModels { get; set; } = default!;

public void OnFamilyClick(Family family)
    {
        foreach(var elementDataModel in ElementDataModels)
        {
            elementDataModel.Brightness = elementDataModel.Family.Equals(family) ? 100 : 60;
        }
    }

在PeriodicTableView中,每个元素的数据模型都是这样创建的。

public List<ElementDataModel> ElementDataModels { get; set; } = new();

    protected override void OnInitialized()
    {
        foreach (var element in Element.All)
        {
            ElementDataModels.Add(new ElementDataModel(element));
        }
    }

逻辑工作正常,我进行了调试,亮度属性确实发生了变化。但我没有得到任何UI更改。错误是什么?我是否错过了一些StateHasChanged()?我如何使用新的亮度值重新呈现PeriodicTableView.剃刀?
谢谢
编辑:亮度绑定:

<div style="filter: brightness(@($"{DataModel.Brightness}%"))">
@code{
    [Parameter, EditorRequired] public ElementDataModel DataModel { get; set; } = default!;
}

元素数据模型:

public class ElementDataModel 
{
    public ElementDataModel(Element initialValue)
    {
        Brightness = 100;
        AtomicMass = initialValue.AtomicMass;
        Electronegativity = initialValue.Electronegativity;
        IonizationEnergy = initialValue.IonizationEnergy;
        Symbol = initialValue.Symbol;
        Name = initialValue.Name;
        ElectronConfiguration = initialValue.ElectronConfiguration;
        AtomicNumber = initialValue.AtomicNumber;
        OxidationStates = initialValue.OxidationStates;
        Family = initialValue.Family;
        Row = initialValue.Row;
        Column = initialValue.Column;
    }

    public int Brightness { get; set; }
    public double AtomicMass { get; }
    public double? Electronegativity { get; }
    public double? IonizationEnergy { get; }
    public string Symbol { get; }
    public string Name { get; }
    public ElectronConfiguration ElectronConfiguration { get; }
    public int AtomicNumber { get; }
    public List<int> OxidationStates { get; }
    public Family Family { get; }
    public int Row { get; }
    public int Column { get; }

}
7qhs6swi

7qhs6swi1#

是的,我认为状态标志的变化不会传播到父节点,所以主视图不知道HeaderView中发生了什么。可能有一个更简单的方法,但我认为类似以下的方法应该有效:

标题视图.razor

[Parameter]
    public EventCallback OnFamilyChanged { get; set; }
    
    public async Task OnFamilyClick(Family family)
        {
            foreach(var elementDataModel in ElementDataModels)
            {
                elementDataModel.Brightness = elementDataModel.Family.Equals(family) ? 100 : 60;
            }
            await OnFamilyChanged.InvokeAsync();
        }

周期表视图.razor

<HeaderView OnFamilyChanged=HandleFamilyChanged />
@code {

    [Parameter, EditorRequired] public List<ElementDataModel> ElementDataModels { get; set; } = default!;

    public async Task HandleFamilyChanged(){
            await InvokeAsync(StateHasChanged);
    }
}

相关问题