c# - 将枚举的每个值绑定(bind)到复选框 Blazor

Question

我有一个 [Flags] 枚举，其中包含一些我想要收集的数据点。我的目标是将每个值(每一位)显示并绑定(bind)为一个单独的复选框，供用户检查。但是，我不知道如何将 Flags 枚举的各个值绑定(bind)到组件，甚至不知道如何绑定(bind)它。为了更好地解释我的观点:

假设这是我的枚举:

[Flags]
public enum DataPoints{
     Large = 1,
     Soft  = 2,
     Green = 4,
     Round = 8
}

然后我想要我的表单的 DataPoints 类型模型中的一个属性可以保存这些值:

//possible data points like:
// 9: Round and Large
// 6: Soft and Green
public DataPoints Data;

我在想类似下面的事情，但我不认为你可以将枚举的单个值/位绑定(bind)到这样的组件:

@foreach (DataPoints datum in Enum.GetValues(typeof(DataPoints)))
   {
      <CheckBox @bind-Value="what? Data.datum?"></CheckBox>
   }

Answer 1

我发现自己在 Blazor 中经常做的事情是创建我称之为载体类的东西，尤其是用于选择项目。我使用相同的技术从列表中选择图片，从多项选择题中选择答案，等等。

@foreach (var item in CheckableEnums)
{
    <span> @item.DataPoint.ToString() &nbsp;</span>
    <input type="checkbox" @bind="item.IsSelected" />
    <br />
}
<br />
@{ SumValue = (DataPoints)(CheckableEnums.Where(cb => cb.IsSelected).Select(val => (int)val.DataPoint)).Sum(); }
<span>Selected Flags: </span>@SumValue.ToString()

@code {
    [Flags]
    public enum DataPoints
    {
        Large = 1,
        Soft = 2,
        Green = 4,
        Round = 8
    }
    class CheckableEnum
    {
        public DataPoints DataPoint { get; set; }
        public bool IsSelected;
    }
    DataPoints SumValue { get; set; }
    List<CheckableEnum> CheckableEnums { get; set; } = new List<CheckableEnum>();
    protected override void OnInitialized()
    {
        foreach (var DPvalue in Enum.GetValues(typeof(DataPoints)))
            CheckableEnums.Add(new CheckableEnum() { DataPoint = (DataPoints)DPvalue });
    }
}

-编辑-以前的 fiddle 被打破了: https://blazorfiddle.com/s/t523591k