Currently, I have successfully added new products to the database with all the desired properties. However, I am facing errors that are preventing me from deploying the application for production. Fixing these errors causes further issues where I cannot add new items to the database.
Here are the errors before attempting to fix them:
ERROR in src\app\admin\product-form\product-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
...
In the component, changing
product = {};
to
product: Product;
results in
Error: Cannot read property 'title' of undefined
and using
product: Product = {};
gives the error
ERROR in src/app/admin/product-form/product-form.component.ts(15,5): error TS2322: Type '{}' is not assignable to type 'Product'.
Property '$key' is missing in type '{}'.
The component code:
import { Component, OnInit } from '@angular/core';
...
The template code:
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
<product-card [product]="product"
[show-actions]="false"></product-card>
</div>
</div>
The definition of the 'Product' interface:
export interface Product {
$key: string;
title: string;
price: number;
category: string;
imageUrl: string;
}