使用*ngFor创建条件

// 商品列表组件
export class ProductListComponent {
  products = [
    { name: 'Product A', price: 50 },
    { name: 'Product B', price: 150 },
    { name: 'Product C', price: 200 }
  ];
}

<!-- 商品列表模板 -->
<ul>
  <li *ngFor="let product of products">
    <ng-container *ngIf="product.price > 100">
      {{ product.name }} - ${{ product.price }}
    </ng-container>
  </li>
</ul>

export class ProductListComponent {
  products = [
    // ... 同上
  ];

  trackByFn(index: number, product: any): number {
    return product.id; // 假设每个商品都有一个唯一的 id
  }
}

<ul>
  <li *ngFor="let product of products; trackBy: trackByFn">
    <ng-container *ngIf="product.price > 100">
      {{ product.name }} - ${{ product.price }}
    </ng-container>
  </li>
</ul>

<ul>
  <li *ngFor="let product of products" [ngClass]="{'hidden': product.price <= 100}">
    {{ product.name }} - ${{ product.price }}
  </li>
</ul>

.hidden {
  display: none;
}