У меня есть компонент:
import {Component, OnInit} from '@angular/core';
import {GlobalSeviceService} from '../services/global-sevice.service';
@Component({
selector: 'app-constructor-page',
templateUrl: './constructor-page.component.html',
styleUrls: ['./constructor-page.component.scss']
})
export class ConstructorPageComponent implements OnInit {
loading = false;
constructor(
public globalService: GlobalSeviceService) {
}
ngOnInit(): void {
this.transferConstructorData(this.globalService.myAnimal.animal_id, this.globalService.myAnimal.gender_id);
}
ngAfterViewInit() {
}
transferConstructorData(anim_id, gender_id){
this.loading = true;
this.globalService.loadCategoriesAndParts(anim_id, gender_id)
.subscribe(response => {
console.log('response:', response);
this.globalService.constructor_resp = response;
this.globalService.categories = this.globalService.constructor_resp.constructor_page['categ_parts'];
this.globalService.parts = this.globalService.constructor_resp.constructor_page['parts'];
let j;
let i = 0;
for (j in this.globalService.categories) {
if (this.globalService.categories[j].changeable){
i ++;
if (i === 1){
this.globalService.categories[j].css_categ_active = true;
}
else {
this.globalService.categories[j].css_categ_active = false;
}
}
}
// сохраняем текущие детали в myAnimal
let k;
let l = 0;
for (k in this.globalService.parts) {
if (!this.globalService.parts[k].changeable || this.globalService.parts[k].default){
l++;
this.globalService.myAnimal.my_parts[l] = this.globalService.parts[k];
}
}
this.loading = false;
console.log(this.globalService.myAnimal.my_parts);
});
}
}
В методе transferConstructorData помимо прочего я загоняю данные в переменные, которые находятся в сервисе:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
export interface MyAnimal{
animal_id: number
gender_id?: number
my_parts?: Part[]
}
export interface Category{
id: number
active: boolean
animal_id: number
bg_color_default: string
bg_color_default_id: number
categ_title: string
changeable: boolean
color_id: number
have_body_color: boolean
have_spec_color: boolean
image: string
required_detail: boolean
spec_color_default: string
spec_color_default_id: number
subjoin: boolean
z_index: number
css_categ_active?: boolean
}
export interface Part{
active: boolean
categ_id: number
categ_title: string
changeable: boolean
default: boolean
have_body_color: boolean
id: number
layer_1_code_bg: string
layer_2_code_outline: string
layer_2_code_white:string
layer_3_code_speccol: string
layer_4_code_glare: string
locked: boolean
part_categ_id: number
part_name: string
subjoin: boolean
bg_color_default: string
spec_color_default: string
}
@Injectable({
providedIn: 'root'
})
export class GlobalSeviceService {
myAnimal: MyAnimal = {animal_id: 0, gender_id: 0, my_parts:[]};
categories: Category[] = [];
parts: Part[] = [];
constructor_resp: any;
constructor(public http: HttpClient) {}
loadCategoriesAndParts(anim_id, gender_id): Observable<Category>{
return this.http.get<Category>('http://localhost:8000/constructor_page?anim_id=' + anim_id
+ "&gender_id=" + gender_id);
}
}
Код шаблона:
<ng-container *ngFor="let part of globalService.parts">
<app-part *ngIf="part.categ_id === categ2.id" [one_part]="part">
</app-part>
</ng-container>
<app-pet *ngFor="let my_part of globalService.myAnimal.my_parts" [one_part]="my_part">
</app-pet>
Вопрос в следующем: в методе transferConstructorData компонента после получения данных с сервера и распределения их в переменные сервиса, я успешно вывожу в console.log объект globalService.myAnimal.my_parts. Когда я пытаюсь получить элементы данного объекта в шаблоне, то получаю:
ERROR TypeError: Cannot read property 'layer_1_code_bg' of undefined
...
То есть шаблон просто не видит эту переменную. При этом шаблон вполне нормально видит аналогичную переменную из сервиса (полученную в том же методе) globalService.parts Почему у меня не получается вывести указанную переменную в шаблон?
Спасибо за ответы.