将枚举的每个值绑定到复选框 Blazor

Question

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

假设这是我的枚举：

[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;

我在想类似下面的事情，但我认为您不能将枚举的单个 values/bits 绑定到这样的组件：

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

Answer 1

我发现自己在 Blazor 中经常做的事情是制作我称之为载体类的东西，尤其是 selecting 项目。我对 select 列表中的图像、多项选择题的答案等使用相同的技术。

@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

Answer 2

因为我的第一个答案已经被接受了，所以我不想更改它。但是 JHBonarius 的建议使用 .Aggregate() 如果有任何组合标志更好：

在标记中：

@{ SumValue = CheckableEnums.Where(cb => cb.IsSelected).Select(val => val.DataPoint).Aggregate((DataPoints)0,(result, value) => result | value); }

和修改后的测试标志：

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

        LargeAndSoft = 3 // Added value.
    }
}

Fiddle: https://blazorfiddle.com/s/hu9kooon

将枚举的每个值绑定到复选框 Blazor

Bind each value of an enum to a checkbox Blazor

c#

enums

enum-flags

blazor

.net-5