无法为 FluentSliderLabels 循环初始化标记

Question

我对 Blazor 有点陌生，在我的一个 .razor 文件中，我有一个 FluentSlider，我希望其范围为 0 到 255，刻度以 32 递增（我希望它能够递增1，只需标记每第 32 个刻度即可）。我认为我可以使用 for 循环来生成标记的标记，而不是为每个标记使用 FluentSliderLabel 标记，如下所示：

<FluentSlider Min="0" Max="255" Step="1" @bind-Value=@SliderVal>
  <FluentSliderLabel Position="0" Style="font-size:20pt">
    0
  </FluentSliderLabel>
  @for(int i = 32; i < 255; i+=32) {
    <FluentSliderLabel Position="@i" Style="font-size:16pt">
      @i
    </FluentSliderLabel>
  }
  <FluentSliderLabel Position="255" Style="font-size:20pt">
    255
  </FluentSliderLabel>
</FluentSlider>

它将刻度线放在正确的位置，但它们都标记为“256”。我必须做什么呢？谢谢...

Answer 1

我测试了一下，似乎这里可能有一些错误需要修复。您可以尝试以下解决方法。
使用以下内容创建一个组件

MySliderLabel.razor

<FluentSliderLabel Position="@pos"  Style="font-size:16pt">@pos</FluentSliderLabel>
@code {
    [Parameter] public int pos {get;set;}
}

然后您可以像下面一样使用这个自定义组件

<FluentSlider Min="0" Max="255" Step="1" @bind-Value=@SliderVal>
  <FluentSliderLabel Position="0" Style="font-size:20pt">
    0
  </FluentSliderLabel>
  @for(int i = 32; i < 255; i+=32) {
 
      <MySliderLabel pos="@i" />  
  }
  <FluentSliderLabel Position="255" Style="font-size:20pt">
    255
  </FluentSliderLabel>
</FluentSlider>

测试结果