*ngFor Inside *ngIf - 如何正确重写答案

【问题标题】：*ngFor Inside *ngIf - How to Rewrite it properly*ngFor Inside *ngIf - 如何正确重写
【发布时间】：2020-03-22 16:35:34
【问题描述】：

有人能告诉我如何在 *ngIF 和 *ngFor 组合下面重写吗？

我知道我的问题是重复的，但请理解，这是不同的。

它工作正常。但面临的问题是<li></li> 标签颜色没有动态改变。但我可以看到'active item' 类在 DOM 中从一个图像滑动到另一个图像时正确应用。

在这里，我想要实现的是，我不想只为单个图像项目显示轮播指示器。如您所见，我正在动态渲染图像。除了主动类颜色变化外，一切都运行良好。

请指出我做错的地方。

<div id="myCarousel" class="carousel" data-ride="carousel">
    <ol class="carousel-indicators" id="sliderDots"
        *ngIf="respDataList  &&  respDataList.length > 1">
        <ng-container >
            <li data-target="#myCarousel"
                *ngFor="let li of respDataList; let i = index" [attr.data-slide-to]="i"
                class="{{ (i == 0) ? 'active' : '' }}"></li>
        </ng-container>
    </ol>
    <div class="carousel-inner">
        <div *ngFor="let document of respDataList; let i = index"
            class="{{ (i == 0) ? 'item active' : 'item' }}"
            [innerHTML]="document>
        </div>
    </div>
</div>

This sample demo i've created for some other purpose我想按上面说的改一下。

提前致谢。

【问题讨论】：

快速指导：可能使用ngClass 而不是class
但它已经可以在 `class` 中正常工作了。最初我使用ngClass，但遇到了一些问题，所以用简单的class替换它
颜色对我来说正在改变.....

标签： angular typescript

【解决方案1】：

只需添加

<ol class="carousel-indicators" id="adList" *ngIf="mockData.length > 1">

你没有少于 2 个元素的指标

https://stackblitz.com/edit/angular-m5gvvj

使单个元素仅删除app组件中的//第16行

【讨论】：