Angular *ngFor数组中的空字符串会导致奇怪的放置问题（与数组中的非空字符串相反）

一个现场演示链接说了千言万语：

正如你所看到的，前两天是尴尬的地方

---

我正在创建一个日历组件，为了显示日数（例如1,2，…，31），我有一个

days

数组。但是为了使

1

显示在正确的工作日（例如Tu）下，我需要用空字符串填充

days

但是，这些空字符串会导致奇怪的放置问题。空字符串的元素的位置高于其他元素

例如，在我的

.ts

文件中：

days=[''，''，''，'30'，'31']

在我的
.html
文件中：

<li *ngFor="let day of days">
    <div class="dayNumber">
       {{day}}
    </div>
 </li>


{{day}

div

元素的默认垂直对齐方式为

垂直对齐：基线

。基线基于文本内容（请参见），但当元素为空时，它似乎位于元素的底部

当字符串为空或仅包含空格时，可以通过显示不可拆分的空格来避免此问题：

{{ day.trim() || ' ' }}

请参见演示

---

或者，您可以为

.days li

元素指定垂直对齐方式。除了导致问题的默认值

基线

，任何对齐值都可以

.days li {
  ...
  vertical-align: middle;
}

---

请参见演示。感谢您的建议。

但是什么导致了问题？为什么没有内容的div更高？实际上，显示数字的元素的方向低于没有内容的元素。您也可以使用零宽度空间（

​；

）来代替非中断空间。这将本质上呈现为一个空元素到“.days li”规则非常感谢！codequiet的解决方案稍微好一点，因为它不会在网页中留下一个空字符串，突出显示时可以“看到”。