Я хочу отобразить список продуктов

Question

отображает только объект [объект] и, пока консоль присваивает свойству продуктов, оно имеет неопределенное свойство. При показе в HTML файлах продуктов оно не получает значения. и введите значение продуктов в другой компонент, который не показывает никакого значения.

import { Component ,EventEmitter, OnInit} from '@angular/core';
    import { Product } from './product.model';

    //this called decorator
    @Component({
      // tells Angular what element to match
      selector: 'app-root',
      //define the view
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    // this is controller
    export class AppComponent implements OnInit {
      products: Product[];

      constructor() {
        this.products = [
          new Product(
            'MYSHOES',
            'Black Running Shoes',
            '/assets/img/nike.jpeg',
            ['Men', 'Shoes', 'Runings'],
            109.99
          ),
          new Product(
            'BAT',
            'A Nice Black Hat',
            '/assets/img/Bat.jpg',
            ['Men', 'Apparel', 'bat'],
            29.99
          ),
          new Product(
            'NICHET',
            'A Nice Black Hat',
            '/assets/img/product/black-hat.png',
            ['Men', 'Accessories', 'Hats'],
            29.99
          )
        ];

      }

    ngOnInit(){
      this.products
    }
      productWasSelected(product: Product): void {
        console.log('Prodiuct clicked', product);
      }
    }

это моя html страница !!

    <div class="inventory-app">
      <app-products-list>
        [productList]="products"
         (onProductSelected)="productWasSelected($event)"
      </app-products-list>
      <h1>{{products}}</h1>
    </div>

Answer 1

Вам необходимо использовать *ngFor для отображения объекта списка со свойствами как

<div class="item" *ngFor="let item of products">
  <h1>{{item.name}}</h1>
  <img src='{{item.image}}' />
  <p>{{item.price}}</p>

</div>

Я сделал пример в stackbliz, на который вы можете ссылаться: https://stackblitz.com/edit/angular-xgdtu7

Answer 2

angular просто показывает, что это массив объектов, поэтому вам нужно использовать ngFor

<h1 *ngFor="let product of products"> 
  {{product.name}}
</h1>

И после этого вы также не можете использовать {{product}}, но вам нужно использовать некоторые свойства продукта как {{product.name}} или {{product.type}}

Answer 3

вы инициализируете массив продуктов неверным способом.

Массив продуктов должен содержать элементы, но вы инициализируете класс, вместо этого он должен быть массивом объектов.

И вы можете объявили ключи в модели с их типом, используйте его здесь.

образец модели

export interface ShoeDetails{
name: string;
type: string;
img: string;
category: [string];
price: number;
}

Массив продукта должен выглядеть следующим образом:

products: Array<ShoeDetails> = [];

     this.products = [
              {
               name: 'MYSHOES',
               type: 'Black Running Shoes',
               img: '/assets/img/nike.jpeg',
               category:  ['Men', 'Shoes', 'Runings'],
               price:109.99
               }
              ,
             ...
            ];

и в ngOnInit this.products не имеет смысла. конкретная строка не будет инициализирована, если вы об этом подумали. Пожалуйста, удалите ее.

теперь в HTML вы можете использовать ее следующим образом для доступа к имени каждого элемента в массиве продукта:

<h1 *ngFor="let product of products">{{product.name}}</h1>