Angular2: <li> 和 *ngFor 不在 <ul> 内答案

【问题标题】：Angular2: <li> with *ngFor not inside <ul>Angular2: <li> 和 *ngFor 不在 <ul> 内
【发布时间】：2023-04-01 14:53:01
【问题描述】：

我要创建一个时间线组件，我有以下模板

<ul *ngIf="alerts!=undefined" class="timeline">
        <li *ngFor="let alert of alerts; let i=index" [class.timeline-inverted]="i % 2 == 1">
            <div class="timeline-badge">
                <span>{{alert.type}}</span>
            </div>
            <div class="timeline-panel">
                <div class="timeline-body">
                    <p>{{alert.id}}</p>
                </div>
                <div class="timeline-footer">
                    <p class="">{{alert.date}}</p>
                </div>
            </div>
        </li>
    </ul>

对应的.scss文件是这样的

.timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
    border-style: solid;
    border-width: medium;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 6px;
    background: $magenta;
    left: 50%;
    margin-left: -3px;
}
.timeline > li {
    margin-bottom: 40px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: calc(100% - 35px);
    width: -moz-calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    float: left;
    border-radius: 5px;
    background: $white;
    position: relative;
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid $white;
    border-right: 0 solid $white;
    border-bottom: 14px solid transparent;
    content:" ";
}

<ul>标签没有被*ngFor创建的<li>标签填充，这使得时间线的“线”消失了。

黑色边框是<ul> 标签的边框，假设将所有<li> 标签包裹在其下方，并让洋红色线穿过所有气泡。

【问题讨论】：

标签： html css angular

【解决方案1】：

你的问题在于 CSS

当您在 li 上使用 float 时，它实际上会将其从文档流中删除。

通过使用溢出：隐藏，它会以某种方式解决这个问题。

你可以阅读这个answer

【讨论】：

li 在任何情况下都将是ul 的直接子代。所以这不是问题。
我知道，但你可以自己试试。如果 Angular 从有效模板生成无效标记，那会很奇怪，不是吗？但当然不是。
我明白了，你是对的。它实际上更像是在它前面插入一个模板节点而不是包装 li
我认为您的问题更像是 css 问题。我认为您可以尝试溢出：隐藏在 ul 上，即 .timeline
@maxisam 谢谢，在<ul> 标签上添加overflow:hidden 有效！你能再解释一下吗？使用overflow:hidden，那些<li>s 根本不会被隐藏。 <ul> 标签是如何工作的？

【解决方案2】：

您的问题不在于 CSS，而在于角度结构指令。请阅读这篇文章，

https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container

我相信，你会在那里找到解决办法的。

【讨论】：