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的索引，然后在索引位于第3位时使用*ngIf执行操作。请参阅下文，我使用了<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>
   <li *ngFor="#item of items; let i = index" [attr.data-index]="i"">
       <span *ngIf="i == 2"> this is third element {{item}} <span>
       <span *ngIf="i != 2"> {{item}} <span>
   </li>
</ul>

Answer 3

根据您的评论，您实际上需要以下内容：

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

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

在ngFor循环之间插入项目

3 个答案: