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>进行救援。

Angular是一个分组元素，不会干扰样式或布局，因为Angular不会将其放入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/

Answer 2

对于此问题，您可以使用<ng-container>。

<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>

有关ng-container及其朋友的其他精彩文章：

https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

<ng-container> vs <template>

* ngFor将父div添加到每个迭代的元素中

2 个答案: