asp.net-core - 使用服务器端 Blazor 动态填充选择列表的问题

Question

尝试动态填充选择下拉列表，并且每次运行它时，我都可以通过 @foreach 块一直很好地单步执行代码，但随后它似乎陷入了连续循环或其他东西，并且将完全冻结一切！挣扎，因为甚至没有发生错误。

“/api/Reps/Index”控制器单独工作就好了。我什至更新了它，只返回一个代表，看看这是否是一个问题，但没有任何区别。

*注意：使用 MatBlazor 实现 Material Design。

我的 .Razor 页面：

@inject HttpClient Http

<EditForm Model="@projectParameters">
  <DataAnnotationsValidator />
  <ValidationSummary />

  <div>
    <MatSelect Label="Rep" @bind-Value="@projectParameters.Rep">
        <MatOption Value="">Select</MatOption>
        @foreach (var rep in repList)
          {
           <MatOption Value="@rep.id.ToString()">@rep.name</MatOption>
          }
    </MatSelect>
  </div>
</EditForm>

@code
{
  Project projectParameters = new Project();
  private MyRep[] repList { get; set; }

  protected override async Task OnInitAsync()
  {
    repList = await Http.GetJsonAsync<MyRep[]>
    ("/api/Reps/Index");
  }
}

这也是我的 RepsController.cs 代码：

namespace MyProject.Controllers
{
    public class RepsController : Controller
    {
        MyDataAccessLayer objrep = new MyDataAccessLayer();

        [HttpGet]
        [Route("api/Reps/Index")]
        public IEnumerable<MyRep> Index()
        {
            return objrep.GetAllReps();
        }
    }
}

Answer 1

只需添加等于您的选项值的 @key 属性，因此代码示例：

<select>
     <option @key="@rep.id" value="@rep.id">@rep.name</option>
</select>