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>

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

2 个答案: