订单列表-在Angular 5中使用动态类时，列表项编号将消失

Question

我有以下css：

.hide-item {
display: none;
}
.show-item {
display: block;
}

在我的模板中，我有以下代码：

<ol>
<ng-container *ngFor="let issue of selectedIssues; let i = index;">
<li [ngClass]="i >= issuesCount ? 'show-item' : 'hide-item'"><a href="{{issue.html_url}}" target="_blank">{{issue.title}}</a></li>
</ng-container>
</ol>

在放入三元运算符之前，它会用数字列出项目。现在，它列出了项目，只列出了>=i但数字不再出现的项目。没有项目符号，只有一个空格，然后是项目。为什么？

Answer 1

在html 中

<ol>
<ng-container *ngFor="let issue of propTemplateResult; let i = index;">
<li [class]="i >= issuesCount ? 'show-item' : 'hide-item'"><a href="{{issue.html_url}}" target="_blank">{{issue.title}}</a></li>
</ng-container>
</ol>

在CSS 中

.hide-item {
visibility: hidden;
}
.show-item {
visibility: visible;
}

Answer 2

[ngClass]值格式的问题。格式应为-

{ 
cssClassName1 : {Boolean},
cssClassName2 : {Boolean}
...
}

因此，无论哪个属性获得真值，都将作为类应用到元素中。

**所以你修改的代码应该像-**

<ol>
<ng-container *ngFor="let issue of propTemplateResult; let i = index;">
<li [class]="{'show-item' : (i >= issuesCount), 'hide-item' : (i < issuesCount)}">
<a href="{{issue.html_url}}" target="_blank">{{issue.title}}</a></li>
</ng-container>
</ol>