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

Question

实时演示链接说出一千个字：https://stackblitz.com/edit/angular-5vwspd

如您所见，前两天的位置很尴尬。

---

我正在创建一个日历组件，并显示日期数字（例如1,2，...，31），我有一个days数组。但是，为了使1出现在正确的工作日（例如Tu）下，我需要用空字符串填充days。

但是，这些空字符串导致奇怪的放置问题。空字符串的元素放置在其他元素的上方。

例如，在我的.ts文件中： days = ['','','',...,'30','31'];

在我的.html文件中：

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

Answer 1

div元素的默认垂直对齐为vertical-align: baseline。基线基于文本内容（请参见this post），但是，当元素为空时，它似乎位于元素的底部。

您可以通过在字符串为空或仅包含空格时显示不可中断的空格来避免此问题：

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

有关演示，请参见this stackblitz。

---

或者，您可以为.days li元素指定垂直对齐方式。除baseline（这是导致问题的默认值）以外的任何对齐方式都可以。

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

有关演示，请参见this stackblitz。感谢codequiet的建议。