Question

在angular 5模板中，我有这样的标记

<section class="tickets-block">
    <div class="container small">
        <div class="our-team">
            <ul>
                <li class="custom" *ngFor="let event of events; let i=index">
                {{event.name}}
                </li>
            </ul>
        </div>
    </div>
</section>

在li标签中你可以看到我使用了ngFor循环。所以基本上我想要在3 li之后ul标签应该自动关闭，之后它应该再次使用li标签启动ul。

所以我的输出应该是这样的

<section class="tickets-block">
    <div class="container small">
        <div class="our-team">
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
            <section class="tickets-block">
    <div class="container small">
        <div class="our-team">
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
            <ul>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
                <li class="custom>
                {{event.name}}
                </li>
            </ul>
        </div>
    </div>
</section>
        </div>
    </div>
</section>

有人能告诉我怎么做吗？任何帮助和建议都会非常明显。

Answer 1

您需要将数组转换为多维数组，如

events = [ [{...},{...}, {...}], [{...},{...}, {...}] ]

并在html中：

<ul *ngFor="let row of events">
  <li *ngFor="let event of row">{{ event.name }}</li>
</ul>

你也可以在你的html中使用这样的hack

  <ul *ngFor="let row of events.slice(0, events.length/3 + 1); let i = index">
    <li *ngFor="let event of events.slice(i * 3, i * 3 + 3)">{{ event.name }}</li>
  </ul>

Angular 5 ng特定重复后的关闭标记

1 个答案: