visual studio中窗口已损坏的OnInitialized null对象

Question

1：(https://i.stack.imgur.com/MsRx3.pngim)使用blazor 5.0服务器端

当我试图加载页面产品时，我在visualstudio中得到了窗口损坏的空对象

几个小时后，我知道问题是从哪里来的，但我不知道的解决方案是什么

当我删除OnInitialized方法时，一切都恢复正常，并且我确信foreach中没有空对象

中断出现在foreach完成之后

这里是代码

List<ProductModel> ProductModels { get; set; } = new List<ProductModel>();
protected override void OnInitialized()
{
var products = mapper.Map<IEnumerable<Product>, IEnumerable<ProductModel>>(ProductRepository.GetAll().Result);
ProductModels = products.ToList();
}

那么我有foreach从列表加载产品

@foreach (var product in ProductModels)
{
<div id="product_conent_-957477490" class="product-box">
<EditForm Model="product" OnValidSubmit="()=>SaveProduct(product)" class="product-form">
<DataAnnotationsValidator />
<div class="thumbnail save-product">
<button type="button" @onclick="()=>ProductModels.Remove(product)" class="btn btn-delete-circle btn-delete-product"><i class="sicon-cancel"></i></button>
<div class="caption caption-small">
<div class="product-thumb-wrapper">
<div class="thumb">
<div class="thumb-mask">
<img @onclick="()=> { showModal = true; IdModal = product.ID;}" src="@ImageModels.FirstOrDefault(w=>w.ID == product.ID).ImageUrl" alt="IMG">
@if (showModal && IdModal == product.ID)
{
//select the current product and show only one modal
<Shop.Pages.Modals.AddPictureModal OnShowModal="()=>showModal = false" productModel="product" OnChangeInput="HandleImageUpload" OnDeleteButton="HandleImageDelete"></Shop.Pages.Modals.AddPictureModal>
}

</div>
<div class="product-check rec-checkbox rec-checkbox--default rec-checkbox--large rec-checkbox--primary-bg" style="display: none;">
<input type="checkbox" name="product_-957477490" id="product_-957477490" class="product-check">
<label for="product_-957477490">
<span class="product-type">منتج جاهز</span>
</label>
</div>
<button @onclick="()=> { showModal = true; IdModal = product.ID;}" type="button" class="product_image_btn">
<i class="sicon-image"></i> <span>إضافة صورة او فيديو</span>
</button>
<button type="button" class="pin_btn " style="display: none;"><i class="sicon-thumbtack"></i></button>
</div>
<div class="product-name-type prfw">
<div id="product_name_-957477490" class="form-group tooltip-toggle trans top mb-0">
<div class="input-group">
<span class="tooltip-content">
<i class="sicon-packed-box"></i>
منتج جاهز
</span>
<span class="input-group-addon input-group-addon-small">
<i class="sicon-packed-box"></i>
</span>
<InputText @bind-Value="product.Name" placeholder="منتج جاهز - ادخل اسم المنتج  " class="form-control"></InputText>
</div>
<span style="color:red" class="help-block cs">
<ValidationMessage For="()=>product.Name" />
</span>
<span class="help-block cs" style="display: none;">
</span>
</div>
<div class="form-group product-price-small-screen">
<div class="input-group">
<span class="input-group-addon input-group-addon-small">
<i class="sicon-dollar-coin-stack"></i>
</span>
<InputText @bind-Value="product.Price" placeholder="السعر" class="form-control _parse_parseArabicNumbers"></InputText>
<span class="input-group-addon">ر.س</span>
</div>
<span style="color:red" class="help-block cs">
<ValidationMessage For="()=>product.Price" />
</span><!---->
</div>
</div>
</div>
<div class="product-fields-wrapper prfw">
<div class="form-group product-price-large-screen">
<div class="input-group">
<span class="input-group-addon input-group-addon-small"><i class="sicon-dollar-coin-stack"></i></span>
<InputText @bind-Value="product.Price" placeholder="السعر" class="form-control _parseArabicNumbers"></InputText>
<span class="input-group-addon">ر.س</span>
</div>
<span style="color:red" class="help-block cs">
<ValidationMessage For="()=>product.Price" />
</span><!---->
</div>
<div class="form-group">
<div class="input-group product-quantities product-quantities--products-group">
<div>
<span class="input-group-addon input-group-addon-small"><i class="sicon-box-bankers"></i></span>
<InputText @bind-Value="product.Quantity" placeholder="الكمية المتوفرة" class="form-control product_quantity _parseArabicNumbers"></InputText>
</div>
<button type="button" class="rec-btn btn-tiffany btn-notify"><i class="sicon-bell-time"></i></button>
<button type="button" class="btn btn-tiffany btn-infinite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 8 8 C 3.6102416 8 0 11.595515 0 16 C 0 20.400585 3.599415 24 8 24 C 10.646 24 12.420344 22.745203 13.777344 21.033203 C 13.147344 20.063203 12.616672 19.057234 12.138672 18.115234 C 10.996672 19.940234 9.828 21 8 21 C 5.220585 21 3 18.779415 3 16 C 3 13.224485 5.2377584 11 8 11 C 9.4265669 11 10.267624 11.520682 11.15625 12.525391 C 12.044876 13.530099 12.834942 15.048526 13.652344 16.673828 C 14.469745 18.29913 15.315394 20.031983 16.585938 21.464844 C 17.85648 22.897705 19.696851 24 22 24 C 26.362802 24 30 20.414234 30 16 C 30 11.599415 26.400585 8 22 8 C 19.35 8 17.576703 9.2652813 16.220703 10.988281 C 16.849703 11.961281 17.379422 12.969109 17.857422 13.912109 C 19.003422 12.069109 20.172 11 22 11 C 24.779415 11 27 13.220585 27 16 C 27 18.765766 24.719198 21 22 21 C 20.566649 21 19.72091 20.477295 18.830078 19.472656 C 17.939247 18.468017 17.14913 16.95087 16.332031 15.326172 C 15.514933 13.701474 14.671546 11.969901 13.404297 10.537109 C 12.137048 9.1043186 10.298933 8 8 8 z"></path></svg>
</button>
<div class="rec-list rec-list--horizental left-arrow" style="display: none;">
<span>نبهني عند وصول الكمية إلى</span>
<input type="text" id="low_quantity_0" placeholder="ادخل اقل قيمة..." class="form-control _parseArabicNumbers">
</div> <!---->
</div>
<span style="color:red" class="help-block cs">
<ValidationMessage For="()=>product.Name" />
</span><!---->
</div>
<div class="form-group ">
<div class="input-group">
<select @bind="product.IDCategory" @onclick="UpdateSelectCategory" class="vue-treeselect__control">
<option selected>اختر تصنيف المنتج</option>
@foreach (var category in CategoryModels)
{
<option value="@category.ID">@category.Name</option>
}
</select>

<div class="input-group-btn">
<button type="button" data-toggle="modal" data-target="#new_category" class="btn btn-tiffany btn-icon btn-add-category">
اضف تصنيف
</button>
</div>


<!---->

</div>
</div>
</div>
<div class="controls-wrapper">
<div class="options-wrapper">
<div class="options">
<div class="form-group">
<button type="button" data-toggle="modal" data-target="#modal_product_options" class="btn border-slate text-slate-800 btn-flat btn-xs product-options-btn">
<i class="sicon-tune-alt"></i>
بيانات المنتج
</button>
</div>
</div> <!---->
</div>
<div class="submit-wrapper">
<button type="submit" class="btn btn-tiffany btn-xs btn-full save-product btn-save">
حفظ
</button>
</div>
</div>
</div>
</div>
</EditForm>
</div>
}

Answer 1

好的，问题来自这一行

<img @onclick="() => { showModal = true; IdModal = product.ID; }" src="@ImageModels.FirstOrDefault(w => w.ID == product.ID).ImageUrl" alt="IMG">

特别来自@ImageModels.FirstOrDefault

谢谢你们

Answer 2

首先记得初始化列表：

List<ProductModel> ProductModels { get; set; } = new List<ProductModel>();

添加此行：

@if(ProductModels != null)
{
foreach (var product in ProductModels)
...

在_Host.cshtml 中

<component type="typeof(App)" render-mode="ServerPrerendered" param-State="state" />