基本上,我有一个期刊表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; }
}
1条答案
按热度按时间7qhs6swi1#
是的,我认为状态标志的变化不会传播到父节点,所以主视图不知道
HeaderView
中发生了什么。可能有一个更简单的方法,但我认为类似以下的方法应该有效:标题视图.razor
周期表视图.razor