使用服务器端 Blazor 动态填充选择列表的问题答案

【问题标题】：Issue dynamically populating select list with server-side Blazor使用服务器端 Blazor 动态填充选择列表的问题
【发布时间】：2019-07-16 05:36:37
【问题描述】：

尝试动态填充选择下拉列表，并且每次运行它时，我都可以通过 @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();
        }
    }
}

【问题讨论】：

我不太确定没有发生错误，因为第一次渲染会抛出，因为 MyRep 为空。尝试初始化 MyRep 或用 if 包装 foreach 以防止出现 null？
见鬼，你是对的。就是这样！添加了一个 if 以首先检查 null 和瞧。知道为什么它会对我的程序（和计算机）造成如此严重的影响，而不仅仅是在第一次通过时出错？
不，但我会责怪一些异步的东西
@MisterMagoo：如何初始化 repList：private MyRep[] repList { get; set; } = new MyRep[0];。当 OP 尝试迭代 null 时会引发错误。
@herrera ，很好看，这当然是我想说的

标签： asp.net-core blazor blazor-server-side asp.net-core-3.0 matblazor

【解决方案1】：

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

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

【讨论】：