代码之家 › 专栏 › 技术社区 › Mike

顺序列表-在角度5中使用动态类时,列表项编号消失

angular

1

Mike · 技术社区 · 7 年前

.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>

2 回复 | 直到 7 年前

1

Soumya B. Athani 7 年前

在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>

.hide-item {
    visibility: hidden;
}

.show-item {
    visibility: visible;
}

2

0

Sunil Singh 7 年前

关于 [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>