angular - *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征求意见。