MudBlazor MudChipSet - 如何以编程方式设置选定的 MudChip？

Question

我在 MudChipSet 中使用了几个 MudBlazors MudChip。确切的数量根据列表的长度而变化（在 MudChip 上创建该列表中的每个对象）。

现在我想根据保存的数据选择其中一个芯片。我的方法是创建一个 MudChips 列表，每个列表项一个（仅设置“文本”属性）。然后，我进行过滤以获取“Text”与我拥有的字符串匹配的结果，并将该结果设置为绑定“selectedChip”变量。

但是，这行不通。知道为什么吗？

在此处查看演示：try.mudblazor.com/snippet/wOweEzaxfXjVrtFe

Answer 1

有两件事：

1. 您不应该尝试在初始化时设置该项目，而应该在组件渲染后尝试设置。
2. 您正在创建一个全新的芯片列表，而不是使用由

   ChipSet

   foreach 循环渲染的芯片。

变化：

    // Run this on component initialzing to pre-set the selected chip
    protected override void OnAfterRender(bool firstRender) 
    {
        if (!firstRender) return;

        selectedChip = availableChips.Single(e => e.Text == SelectedLocation);

        StateHasChanged();
    }

添加对正在渲染的芯片的引用

    @foreach (var entry in GetWorkLocationHoursMock())
    {
        <MudChip @ref=ChipRef Text="@entry.Location" Color="Color.Primary"/> 
    }

并将这些项目添加到您的列表中，而不是创建新的

MudChip

对象

    private MudChip ChipRef { set => availableChips.Add(value); }

最终结果应该类似于this