Ошибка InvalidOperationException:"Object of type 'ProductCard' does not have a property the name 'ProductId' при передаче параметра в Blazor компонент
Я работаю над Blazor приложением и пытаюсь передать ProductId в компонент ProductCard через параметр URL
.
Однако получаю ошибку:
System.NullReferenceException:
"Object reference not set to an instance of an object." productDTO было null.
Catalog.razor — страница, на которой я показываю список продуктов и при клике перехожу на компонент ProductCard с передачей параметра ProductId:
@code {
protected override async Task OnInitializedAsync()
{
var products = await ProductRepository.GetAll();
productsDTO = products.Select(p => new ProductDTO
{
Name = p.Name,
Img = p.Img,
Description = p.Description,
Price = p.Price
}).ToList();
}
private void OnProductClick(ProductDTO product)
{
NavigationManager.NavigateTo($"/ProductCard/{product.Id}");
}
}
Все работает корректно и выводит все необходимое.
ProductCard.razor — компонент, который принимает ProductId в качестве параметра:
@using Core
@using Core.DTO;
@using Core.Entities
@using Infrastructure.Repository
@page "/ProductCard/{ProductId:guid}"
@rendermode InteractiveServer
@inject ProductRepository productRepository
<div class="ProductCard">
<img src="@productDTO.Img" />
<div class="card-body"
<span class ="title">@productDTO?.Name</span>
<span class="price">@productDTO?.Price</span>
<span class="description">@productDTO?.Description</span>
<span class="specs">@productDTO?.Specs</span>
</div>
</div>
@code {
[Parameter]
public Guid productId { get; set; }
private ProductDTO productDTO;
protected override async Task OnInitializedAsync()
{
var product = await productRepository.GetByIdAsync(productId);
if (product != null)
{
productDTO = new ProductDTO
{
Id = product.Id,
Name = product.Name,
Img = product.Img,
Description = product.Description,
Price = product.Price,
Specs = product.Specs
};
}
else
{
Console.WriteLine("Продукт не найден");
}
}
}
}
Blazor не распознает ProductId как параметр в ProductCard, и я получаю исключение.
Ответы (1 шт):
Ошибка InvalidOperationException:"Object of type 'ProductCard' does not have a property
the name 'ProductId' при передаче параметра в Blazor компонент
Ошибка говорит, что нет параметра с таким именем у вашей модели.
тут вы пишите Id
NavigationManager.NavigateTo($"/ProductCard/{product.Id}");
затем как Parameter передаете с маленькой буквы
public Guid productId { get; set; }
а дальше с большой.
@page "/ProductCard/{ProductId:guid}"
вот как можно исправить, чтоб сама переменная не создавала конфликта и правильно инициализировалась
@page "/ProductCard/{ProductId:guid}"
@code {
[Parameter]
public Guid ProductId { get; set; } // Теперь с большой буквы
private ProductDTO productDTO;
protected override async Task OnInitializedAsync()
{
var product = await productRepository.GetByIdAsync(ProductId);
if (product != null)
{
productDTO = new ProductDTO
{
Id = product.Id,
Name = product.Name,
Img = product.Img,
Description = product.Description,
Price = product.Price,
Specs = product.Specs
};
}
else
{
Console.WriteLine("Продукт не найден");
}
}
}
я бы еще добавила проверку
@if (productDTO != null)
{
<div class="ProductCard">
<img src="@productDTO.Img" />
<div class="card-body">
<span class="title">@productDTO.Name</span>
<span class="price">@productDTO.Price</span>
<span class="description">@productDTO.Description</span>
<span class="specs">@productDTO.Specs</span>
</div>
</div>
}
else
{
//тут ваш лоадер
}