NavMenu foreach 循环

Question

在我的 blazor 应用程序中，我在 NavMenu.razor 中添加了以下代码：

@foreach (var item in surveys)
        {
             <div class="nav-item px-3">
                <NavLink class="nav-link" href="@($"survey/{item.Id}")" Match="NavLinkMatch.All">
                    <span class="oi oi-star" aria-hidden="true"></span> @item.Title
                </NavLink>
            </div>
        }

这是在代码部分：

List<Survey> surveys = new List<Survey>();
    
    protected override async Task OnParametersSetAsync() {
        surveys = await Http.GetFromJsonAsync<List<Survey>>("https://localhost:5001/api/Surveys/");
    }

问题是它不会更改组件，尽管 url 正在正确更改。所以我会在按下按钮时得到 https://localhost:4001/survey/2 和 https://localhost:4001/survey/1，但页面保持不变。

最初我一直在使用 OnInitializedAsync，但我读到我真的应该覆盖 OnParametersSetAsync 并且它没有解决问题。

知道我应该更改什么才能使导航正常工作吗？

这是调查 class :

public class Survey
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Description { get; set; }
        public string? Picture { get; set; }
    }

以及应呈现的 Surveys 组件：

@page "/survey/{SurveyId:int}"
@inject HttpClient Http

@if(survey!=null){
    <div style="height: 100vh; background-image: url(@survey.Picture); background-size: cover;">
        <TopBar ComponentName=@survey.Title />
        This is survery @SurveyId - @survey.Id 
    </div>
}

@code {
    [Parameter]
    public int SurveyId { get; set; }

    private Survey survey;

    protected override async Task OnInitializedAsync() {
        survey = await Http.GetFromJsonAsync<Survey>("https://localhost:5001/api/Surveys/"+SurveyId);
    }

}

Answer 1

您走在正确的道路上，您没有更改页面组件，因此 OnInitializedAsync 仅在第一次加载组件时被调用。您需要将数据检索代码放在 OnParametersSetAsync 中，并在 Id 字段更改时运行它。

像这样：

@page "/survey/{SurveyId:int}"
<h3>Survey</h3>

@code {
    [Parameter] public int SurveyId { get; set; } = 0;

    private int currentId = 0;

    protected async override Task OnParametersSetAsync()
    {
        if (!this.SurveyId.Equals(this.currentId))
        {
            survey = await Http.GetFromJsonAsync<Survey>("https://localhost:5001/api/Surveys/" + SurveyId);
            this.currentId = this.SurveyId;
        }
    }
}

质疑答案

由于我对这个问题的回答受到质疑，这里有一些简单的代码可以证明 OnInitializedAsync 在问题中描述的场景中只被调用一次，以及为什么必须将记录加载代码放在OnParametersSet{Async}.

与问题类似的 NavMenu 部分：

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/1" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home 1
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/2" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home 2
            </NavLink>
        </div>

带有计数器和 ID 的简单页面，以显示我们正在使用相同的组件 (PageId) 以及每个方法的调用次数。

@page "/"
@page "/{Id:int}"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div class="p-2">
    Init: @Init
</div>
<div class="p-2">
    ParSet: @ParaSet
</div>
<div class="p-2">
    Page Id: @PageId
</div>
@code {
    [Parameter] public int Id { get; set; }

    private Guid PageId = Guid.NewGuid();

    private int Init = 0;

    private int ParaSet = 0;

    protected override Task OnInitializedAsync()
    {
        Init++;
        return base.OnInitializedAsync();
    }

    protected override Task OnParametersSetAsync()
    {
        ParaSet++;
        return base.OnParametersSetAsync();
    }
}

这是点击几下后的结果：

NavMenu foreach 循环

NavMenu foreach loop

foreach

blazor

blazor-webassembly

质疑答案