html - 使用<template ngFor>代替* ngFor时出现奇怪的间隙

让以下代码:

<template ngFor [ngForOf]="items" let-item>
            <li>
                <a class='dnp1-menu-link' [routerLink]="[item.route]">
                    <span>{{item.label}}</span>
                </a>
            </li>
</template>

和:

<li *ngFor="let item of items">
        <a class='dnp1-menu-link {{ item.domClass }}' [routerLink]="[item.route]">
            <span> {{item.label}} </span>
        </a>
</li>

我假设这两个代码片段将导致相同的行为，但是:

第一个代码段结果:

html - 使用<template ngFor>代替* ngFor时出现奇怪的间隙-LMLPHP

第二个:

这是预期的吗？为什么？

我知道原因是模板和Follow标记之间是“\ n”
例如，这有效:

<template ngFor [ngForOf]="items" let-item><li>
    <a class='dnp1-menu-link' [routerLink]="[item.route]">
        <span>{{item.label}}</span>
    </a>
</li></template>

不过，我不明白为什么，也不知道这是错误还是功能。

最佳答案

就像@yurzui一样，问题是组件中的“preserveWhitespaces”。

由于组件的默认行为是保留所有空格。

以下两个片段将导致两个不同的DOM:

<template><tag></tag></template>

<template>
    <tag></tag>
</template>

一种

<div *ngFor="...">

在DOM中将没有尾随空间，这就是差异的根源。

为了实现相同的行为，我们可以将preserveWhiteSpaces设置为false。

关于html - 使用<template ngFor>代替* ngFor时出现奇怪的间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46731609/