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

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

  •  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
  •  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>
    
    推荐文章