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

原文 标签 javascript angular angular2-directives

我有以下代码显示项目

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

现在,通过对API的http调用,我获得了items对象。

假设这是以下代码。
this.http.get('/api/items').subscribe(data => {
      this.items= data['results'];
});

我要实现的是,我希望第三个项目成为自定义项目,然后正常渲染以下项目。

如何做到这一点。

谢谢

最佳答案

您可以通过使用*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;
     });

关于javascript - 在ngFor循环之间插入项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46048472/

相关文章:

angular - Angular -输入值更改时不会触发Google Places指令

javascript - 使用Google Analytics(分析)跟踪离线事件

javascript - 带有基于 Angular js的UI的滑块上的 Selenium 测试(python)

javascript - angular 6和asp核心中的动态许可

javascript - DOM中没有选择器标签的Angular 2组件

javascript - 多次出现相同的自定义指令Angular2

javascript - 将数组的多个项目映射到单个对象/函数

javascript - 获取无需事件即可调用Javascript的DOM元素

javascript - Angular 8,如何导航到一个通用页面,然后导航到我想要的页面?

angular - 如何在@ViewChild Angular2 中查找子元素?