Currently, I am working on the ShoppingApp using Angular for the front-end and Firebase for the backend. I have defined a model for the category as follows:
import { ProductModel } from "./product.model";
export class CategoryModel {
public id: number;
public name: string;
public description: string;
public image: string;
public products?: ProductModel[];
constructor(id: number, name: string, description: string, image: string, products: ProductModel[]) {
this.id = id;
this.name = name;
this.description = description;
this.image = image;
this.products = products;
}
}
I have set up a service called data-storage-service.ts to handle fetching and storing data from Firebase.
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
}
@Injectable()
export class DataStorageServiceService {
private heroesUrl = 'https://ng-recipefirebaseio.com/application.json';
// URL to web api
constructor(private http: HttpClient) { }
storeCategoryList(productList: CategoryModel): Observable<CategoryModel> {
return this.http.post<CategoryModel>(this.heroesUrl, productList).pipe(
catchError(this.handleError<CategoryModel>('addCategory'))
)
}
getHeroes(): Observable<CategoryModel[]> {
return this.http.get<CategoryModel[]>(this.heroesUrl)
.pipe(
catchError(this.handleError('getHeroes', []))
);
}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
return of(result as T);
};
}
}
My admin component is all set up, and I have integrated Modals from ngx-bootstrap. The purpose of these Modals is to send data to the server using Reactive Forms for validation. Below is a snippet of the admin component:
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
category = <CategoryModel>{};
// category: CategoryModel[] = [];
categoryList: CategoryModel[] = []
categoryForm: FormGroup;
modalRef: BsModalRef;
constructor(private productsService: ProductsService, private dataStorageServiceService: DataStorageServiceService, private modalService: BsModalService) { }
ngOnInit() {
this.getCategory();
this.initForm();
}
getCategory(): void {
this.dataStorageServiceService.getCategory()
.subscribe(category => this.categoryList = category);
}
storeCategoryList() {
const nameCategory = this.categoryForm.value.name;
const descriptionCategory = this.categoryForm.value.category;
this.category.name = nameCategory;
this.category.description = descriptionCategory;
this.category.id = 1;
this.category.products = null;
this.dataStorageServiceService.storeCategoryList(this.category).subscribe(
(category: CategoryModel) => {
this.categoryList.push(category)
}
)
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
private initForm() {
this.categoryForm = new FormGroup({
'name': new FormControl(null, Validators.required),
'description': new FormControl(null, Validators.required)
})
}
}
An issue arises when trying to store data in the list categoryList, with the error message
ERROR TypeError: _this.categoryList.push is not a functionhttps://i.sstatic.net/1WHvF.png
Upon calling the method getCategory(), the output is displayed as follows: