javascript - *ngFor 正在将父 div 添加到每个迭代元素

Question

我遇到了 *ngFor 的问题。它将为每个迭代元素添加父 div 元素

body.component.html

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Home'" (click)="changeTab('Home')">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Products'" (click)="changeTab('Products')">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [class.active]="tab=='Login'" (click)="changeTab('Login')">Login</a>
    </li>
</ul>

<div [ngSwitch]="tab">
    <div *ngSwitchCase="'Home'">Home</div>
    <div *ngSwitchCase="'Products'" class="row">
            <div *ngFor="let product of getProducts()">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">{{ product.Name }}</div>
                        <div class="card-text">
                            <p>
                                {{ product.Description }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div *ngSwitchCase="'Login'">Login</div>
</div>

body.component.ts

import { Component, OnInit, SimpleChanges, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css'],
})
export class BodyComponent implements OnInit {
  tab='Home';
  Products=[]; //Products Array
  constructor() { 

  }
  ngOnInit() {
  }
  changeTab(tab){
    this.tab=tab;
  }
  getProducts(){
    return this.Products;
  }

}

browser render screenshot

我该如何预防呢？

Answer 1

您可以使用<ng-container>而不是<div>

<ng-container> to the rescue.

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM."

https://angular.io/guide/structural-directives#ng-container-to-the-rescue

<ng-container *ngFor="let product of getProducts()">
  <div class="card">
    <div class="card-body">
      <div class="card-title">{{ product.Name }}</div>
      <div class="card-text">
        <p>{{ product.Description }}</p>
      </div>
    </div>
  </div>
</ng-container>

https://alligator.io/angular/ng-container-element/