javascript - 在 ngFor 循环之间插入项目

Question

我有以下显示项目的代码

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

现在，items 对象是我通过调用 API 获得的结果。

假设这是以下代码。

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

我想实现的是，我希望第三个Item是自定义Item，然后正常渲染后面的item。

如何实现。

谢谢

Answer 1

您可以跟踪 *ngFor 的索引通过使用 let i = index , 然后你可以使用 *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;
     });