无法以编程方式 Select MudTreeView

Question

这个例子是 MudBlazor examples 的一个细微变化：它包含一棵树，我在其中以编程方式尝试 select “内容”节点：

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

    string SelectedValue { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;

    protected override void OnInitialized()
    {
        SelectedValue = "content";
    }

（尝试interactive example）

然而，当我运行程序时，内容节点没有 selected，尽管其他一切看起来都应该是。

这是为什么？如何以编程方式 select 中的节点 MudTreeView?

其他不起作用的变体：

<MudTreeView SelectedValue="content" T="string">

<MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" Selected="true"/>

Answer 1

在 MudTreeViewItem 上将 Activated 指定为 true 您希望被选中。然后在第一次渲染时，如果你想在组件初始化后调用 StateHasChanged 方法。这应该可以解决问题。

示例

这是您的代码的修改版本：

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem Activated=@ContentSelected @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

@code {
    string SelectedValue { get; set; }
    bool ContentSelected { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;

    protected override void OnInitialized()
    {
        ContentSelected = true;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
            StateHasChanged();
    }
}

https://try.mudblazor.com/snippet/GuQmOyvzQshYmJie

无法以编程方式 Select MudTreeView

Cannot Programatically Select MudTreeView

razor

mudblazor

示例