Angular 8 и .NET core выдает ошибку

@Lucky64 · Регистрация: 16.01.2019

Студворк — интернет-сервис помощи студентам

В общем дела обстоят так, написал проект с клиентами и продуктами в net. core, есть список продуктов и есть список клиентов, у каждого списка есть CRUD (создание, удаление, редактирование). Далее в коре написал метод который добавляет продукты клиенту, проще говоря у каждого клиента(Customer) есть свой список продуктов (CustomerProducts), другими словами использовал many to many. в самом коре все работает хорошо.
Начал переводить весь фронтенд в ангуляр и столкнулся с проблемой. Наглядно это выглядит следующим образом - Запускаю проект, все прогружается хорошо. Захожу в "Редактировать(Изменить)" добавляю клиенту продукт, жму сохранить и все. По сути в бд есть таблица в которой фиксируется отношение клиент айди-продукт-айди. Суть в том, что после того как я жму сохранить, эта таблица пополняется и все вроде как хорошо. Но после того как переходим на главную страницу(Список Клиентов), сами клиенты не загружаются. Т.е. клиенты с пустыми списками проходят нормально, но если у одного из них уже есть продукт, то все идет по... ну вы поняли, а в консоли следующая ошибка. :

Code
1
2
3
4
5
6
7
8
error: {error: SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at XMLHttpRequest.onL…, text: "[{"id":1,"name":"George11111","phoneNumber":13123,…ess":"Google","customerProducts":[{"customerId":3"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for https://localhost:44389/api/customers"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "https://localhost:44389/api/customers"

Искал решения, люди пишут мол страница ждет json, но не получает его и выдает ошибку.
Так же пишут что ангуляр находит пустое значение и из-за этого выдает ошибку, все варианты ее устранения которые я нашел не принесли результатов... Буду очень благодарен за помощь!
ГитХаб проекта Тута КЛИК
П.С. Совсем недавно начал изучать программирование, еще меньше шарп и net. core, Entity Framework, а с ангуляром начал знакомство и вовсе полтора месяца назад, так что я в самом начале пути, и прошу отнестись с пониманием

@IamRain · 21.09.2019, 16:43

Потому что вы возвращаете сущности БД; сериализатор asp.net смотрит на сущность - сериализует, видит navigation property - сериализует, а так как many-to-many, то он бегает рекурсивно по сущностям и возвращает невалидный json.
Решение: замапить сущности БД на dto-хи, либо повесить атрибут JsonIgnore у класса Product-а на свойство Client-а.

@Lucky64 · 22.09.2019, 07:17 **[ТС]**

Сообщение от IamRain

Потому что вы возвращаете сущности БД; сериализатор asp.net смотрит на сущность - сериализует, видит navigation property - сериализует, а так как many-to-many, то он бегает рекурсивно по сущностям и возвращает невалидный json.
Решение: замапить сущности БД на dto-хи, либо повесить атрибут JsonIgnore у класса Product-а на свойство Client-а.

Решил проблему написав нормальные вью модели с нужными параметрами, сейчас мучаюсь с методом добавления продуктов нужным мне способом, застрял на одном месте, не могу понять в чем причина.
в общем вот код компонента:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DataService } from '../data.service';
import { Customer } from '../customer';
import { Product } from '../product';
import { CustomerProduct } from '../customerproduct';
import { CustomerViewModel } from '../customerViewModel';
import { ProductViewModel } from '../productViewModel';
 
@Component({
    templateUrl: './customer-edit.component.html'
})
export class CustomerEditComponent implements OnInit {
 
    id: number;
    customer: CustomerViewModel;    // изменяемый объект
    products: Product[];
    
    num: number[];
    
    loaded: boolean = false;
 
    constructor(private dataService: DataService, private router: Router, activeRoute: ActivatedRoute) {
        this.id = Number.parseInt(activeRoute.snapshot.params["id"]);
    }
 
    ngOnInit() {
        if (this.id)
            this.dataService.getCustomer(this.id).subscribe((data: CustomerViewModel) => {
                this.customer = data, this.customer.products=data.products;
                    if (this.customer != null) this.loaded = true;
            });
        this.dataService.getProducts().subscribe((data: Product[]) => this.products = data);
 
        for (let i of this.customer.products) {
            this.num.push(i.id);
        }
        
    }
    
 
    save(productid: number, productDel: number) {
        if (productDel != null) {
            var pos = this.num.indexOf(productDel);
            this.customer.products.slice(pos, 1);
        }
        if (productid != null)
            this.customer.products.push(new ProductViewModel(productid));
        this.dataService.updateCustomer(this.customer).subscribe(data => this.router.navigateByUrl("/"));
        
        
    }
}

в нужном моменте выдает

Code
1
2
3
4
5
6
7
8
9
10
11
ng:///AppModule/CustomerEditComponent_Host.ngfactory.js:6 ERROR TypeError: Cannot read property 'products' of undefined
    at CustomerEditComponent.ngOnInit (webpack:///./ClientApp/app/customer-edit/customer-edit.component.ts?:36)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:19743)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:27999)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:27961)
    at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:28595)
    at debugCheckDirectivesFn (webpack:///./node_modules/@angular/core/fesm5/core.js?:28555)
    at Object.eval [as updateDirectives] (ng:///AppModule/CustomerEditComponent_Host.ngfactory.js:10)
    at Object.debugUpdateDirectives [as updateDirectives] (webpack:///./node_modules/@angular/core/fesm5/core.js?:28547)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:27943)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:28184)

Суть ошибки я понимаю(неинициализированное поле customer.products, т.е. не видит его значений, а почему он не видит не могу разобрать, в методе контроллера я передаю кастомера с инклудами и всеми списками в нем, и в хтмл компоненте все видно, а вот почему в тс не видит непойму...

Вот метод из контроллера, который передает кастомера в компонент:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[HttpGet("{id}")]
        public CustomerViewModel Get(int id)
        {
            List<CustomerViewModel> cusid = db.Customers.Include(x => x.CustomerProducts).ThenInclude(x => x.Product).ToList().Select(c => new CustomerViewModel
            {
                Id = c.Id,
                Name = c.Name,
                Address = c.Address,
                PhoneNumber = c.PhoneNumber,
                Products = c.CustomerProducts.Select(x => new ProductViewModel(x)).ToList()
            }).ToList();
 
 
            CustomerViewModel customer = cusid.FirstOrDefault(x => x.Id == id);
            
            return customer;
        }

Использовал Select чтобы вытащить нужную мне инфу и передать ее во вьюху, ну это я думаю вы и так поняли

Добавлено через 12 минут
и еще не перепутайте products это список всех продуктов, а customer.products это список типа продукт в модели кастомера, надеюсь объяснил понятно

Просто надо изменить в компоненте название переменной списка всех продуктов, да руки не доходят

@IamRain · 22.09.2019, 15:26

Сообщение от Lucky64

Суть ошибки я понимаю

Не понимаете, у вас customer undefined (не инициализируется).
1. Не знал, что так можно, через запятую писать

JavaScript
1
2
3
4
(data: CustomerViewModel) => {
                this.customer = data, this.customer.products=data.products;
                    if (this.customer != null) this.loaded = true;
            }

2. Какие-то уж совсем детские ошибки допускаете, у вас только пошел запрос на сервер, а вы уже перебираете свойство customer.products:

JavaScript
1
2
3
for (let i of this.customer.products) {
            this.num.push(i.id);
        }

3. ~~А зачем делать два запроса, если можно получить одним запросом весь граф объектов?~~ Хотя не, пардон, тут, видимо, все ок. Просто список продуктов.

@Lucky64 · 22.09.2019, 19:16 **[ТС]**

Сообщение от IamRain

Не знал, что так можно, через запятую писать

да это я так сказать эксперементировал, убрал уже усе)

Сообщение от IamRain

Какие-то уж совсем детские ошибки допускаете, у вас только пошел запрос на сервер, а вы уже перебираете свойство customer.products:

Да просто для меня это все в новинку, не обжился так сказать, яж писал что полтора месяца назад я и вовсе не знал что такое ангуляр, а программирование изучать начал только 8 месяцев назад, до этого никогда не сталкивался. Ну и глаз замылился видать от 12 часов проб и ошибок, вот и закосячил)

Сообщение от IamRain

Не понимаете, у вас customer undefined (не инициализируется).

Хм, тогда совсем непонятно, почему не инициализируется?? Ведь как раз вот тут:

JavaScript
1
2
3
4
if (this.id)
            this.dataService.getCustomer(this.id).subscribe((data: CustomerViewModel) => {
                this.customer = data, this.customer.products=data.products;
                    if (this.customer != null) this.loaded = true;

я его инициализирую?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@IamRain 4694 / 2702 / 734 Регистрация: 02.08.2011 Сообщений: 7,233
	21.09.2019, 16:43
	Потому что вы возвращаете сущности БД; сериализатор asp.net смотрит на сущность - сериализует, видит navigation property - сериализует, а так как many-to-many, то он бегает рекурсивно по сущностям и возвращает невалидный json. Решение: замапить сущности БД на dto-хи, либо повесить атрибут JsonIgnore у класса Product-а на свойство Client-а. 0