在ngFor循环之间插入项目

Question

我有以下代码显示项目

<ul>
<li *ngFor="#item of items">{{item}}</li>
</ul>

现在,items对象是我对API调用的结果.

我们假设这是以下代码.

this.http.get('/api/items').subscribe(data => {
      this.items= data['results'];
});

我想要实现的是我希望第三个项目是自定义项目,然后正常呈现以下项目.

怎么能得到这个.

谢谢

Answer 1

您可以*ngFor通过使用跟踪索引,let i = index然后可以使用a *ngIf在索引位于3时执行操作.请参阅下文,我使用<pre></pre>因为我不知道是什么item.

<ul>
    <li *ngFor="let item of items; let i = index">
        <pre *ngIf="i !== 2; then thenBlock else elseBlock"></pre>
    </li>
</ul>

<ng-template #thenBlock>{{item}}</ng-template>
<ng-template #elseBlock>//Display something for item 3</ng-template>

你的HttpGet是错的,我假设你正在使用新的HttpClient,它应该是:

this.http.get<any>('/api/items').subscribe((data: any) => {
      this.items = data;
});

如果它是旧的Http:

this.http.get('/api/items')
    .map((res: Response) => res.json())
    .subscribe((data: any) => {
        this.items = data;
     });

Answer 2

根据您的评论，您实际上需要类似的东西：

<ul>
  <ng-container *ngFor="let item of items; let i = index">
    <li>{{item}}</li>
    <li *ngIf="i === 2">...</li>
  </ng-container>
</ul>

请注意容器上的循环，而不是元素本身，因此我们可以在每个步骤中拥有不同数量的元素，而不会破坏布局。