角组件未在元素中显示（或渲染）

Question

没有出现在浏览器的元素中。

app.component.ts

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: `
   <app-header>

   <app-products-list/>
  `,
  styles: [],
})
export class AppComponent {
  title = 'angular-ecomm';
}

products-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: `
   <div class="p-8 grid grid-cols-2 gap-4">
      @for (product of products(); track product.id) {
        {{product.title}}
      }
    </div>
  `,
  styles: ``
})
export class ProductsListComponent {
  products = signal<Product[]>([
    {
      id: 1,
      title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
      price: 109.95,
      image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
      stock: 10,
    },
    {
      id: 2,
      title: 'Mens Casual Premium Slim Fit T-Shirts',
      price: 22.3,
      image: 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._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/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg',
      stock: 1,
    }
  ]); 

  constructor() {
    console.log("✅ ProductsListComponent Loaded!");
  }
}

products.model.ts

export interface Product{
    id: number;
    title: string; 
    image: string; 
    price: number; 
     stock?: number;  
}

我首先认为这是Taliwind CSS的问题，但是当我检查时，我看到了那个

<app-products-list/>

没有出现在元素中。

我一次又一次地尝试了NG-Serve，但没有起作用。我还尝试使用ngfor循环而不是用于循环，但结果也相同。我也摆脱了CSS，但这也无法正常工作。我已经在products-list.component.ts的末尾添加了功能，并在控制台中看到了它，但

没有渲染。

constructor() {
    console.log("✅ ProductsListComponent Loaded!");
  }

您必须将应用程序组件标记为@Component Decorator内部的独立组件。否则，您将无法使用Imports属性：

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',
  standalone: true,
  imports: [HeaderComponent, ProductsListComponent],
  template: `
   <app-header>

   <app-products-list/>
  `,
  styles: [],
})
export class AppComponent {
  title = 'angular-ecomm';
}