Угловой компонент не отображается (или не визует) в элементах ⇐ Javascript

[Anonymous]

Я новичок в Angular JS, и я пытался сделать веб -сайт электронной коммерции в Angular. Мой компонент < /p>

< /code>
не отображается в элементах браузера.import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { ProductsListComponent } from "./pages/products-list/products-list.component";

@Component({
selector: 'app-root',
imports: [HeaderComponent, ProductsListComponent],
template: `



`,
styles: [],
})
export class AppComponent {
title = 'angular-ecomm';
}
< /code>
Продукты-list.component.ts
import { Component, signal } from '@angular/core';
import { Product } from '../../models/products.model';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-products-list',
standalone: true,
imports: [CommonModule],
template: `

@for (product of products(); track product.id) {
{{product.title}}
}

`,
styles: ``
})
export class ProductsListComponent {
products = signal
([
{
id: 1,
title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
price: 109.95,
image: 'https://fakestoreapi.com/img/81fPKd-2AY ... L1500_.jpg',
stock: 10,
},
{
id: 2,
title: 'Mens Casual Premium Slim Fit T-Shirts',
price: 22.3,
image: 'https://fakestoreapi.com/img/71-3HjGNDU ... Y._UY_.jpg',
stock: 100,
},
{
id: 3,
title: 'Mens Cotton Jacket',
price: 55.99,
image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg',
stock: 0,
},
{
id: 4,
title: 'Mens Casual Slim Fit',
price: 15.99,
image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg',
stock: 5,
},
{
id: 5,
title: "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
price: 695,
image: 'https://fakestoreapi.com/img/71pWzhdJNw ... 5_ML3_.jpg',
stock: 1,
}
]);

constructor() {
console.log(" ProductsListComponent Loaded!");
}
}
< /code>
products.model.ts
export interface Product{
id: number;
title: string;
image: string;
price: number;
stock?: number;
}
< /code>
Я сначала подумал, что это проблема с Tailwind CSS, но потом, когда я осматриваю, я увидел, что < /p>


не отображается в элементах. Я также пытался использовать NGFOR LOOP вместо того, чтобы это приводит к тому же. Я также избавляюсь от CSS, но это тоже не работает. Я добавил функцию в конце продуктов-list.component.ts и увидел, что она виден в консоли, но не рендеринг.
constructor() {
console.log(" ProductsListComponent Loaded!");
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... e-elements