如何在 ionic 4 ion-list 中制作一些项目分隔符

Question

我正在尝试在列表中的某些位置插入 separators/dividers。我将列表绑定到一个可观察对象，但是有些条目是分隔符，我想让它们成为离子分隔符类型。

我已经尝试了几次代码迭代，但是当它们出现时，它们只是普通的可点击项目，而不是分隔线。

上一个：

<ion-list>
    <ion-item button *ngFor="let item of (results | async)" routerDirection="forward" routerLink="/{{ item.itemPage }}">
      <ion-label text-wrap>
        <h3>{{ item.name }}</h3>
      </ion-label>
    </ion-item>
  </ion-list>

现在：

  <ion-list *ngIf="protocols">
    <ion-item button *ngFor="let item of (protocols | async)"  routerDirection="forward" [routerLink]="['/protocol-details/'+ item.id]" ng-class="{'item-divider':'true'}">

      <ion-label text-wrap *ngIf="item.type === 'P'">
        <h3>{{ item.name }}</h3>
      </ion-label>

      <ion-label text-wrap *ngIf="item.type === 'S'">
        <h3 style="color: red;">{{ item.name }}</h3>
      </ion-label>
    </ion-item>
  </ion-list>

分隔符只是普通的可点击项，而不是分隔符。我怎样才能使其中一些不可点击的分隔符，失败的话，只是不可点击的。

Answer 1

您要做的是使某些项目可点击，而另一些则不可点击。我建议你可以尝试类似的方法:

<ion-list *ngIf="protocols">
    <ion-item button *ngFor="let item of (protocols | async)" ng-class="{'item-divider':'true'}">
      <div routerDirection="forward" [routerLink]="['/protocol-details/'+ item.id]">
        <ion-label text-wrap *ngIf="item.type === 'P'">
          <h3>{{ item.name }}</h3>
        </ion-label>
      </div>
      <div>
        <ion-label text-wrap *ngIf="item.type === 'S'">
          <h3 style="color: red;">{{ item.name }}</h3>
        </ion-label>
      </div>
    </ion-item>

  </ion-list>

如何在 ionic 4 ion-list 中制作一些项目分隔符

How to make some items dividers in ionic 4 ion-list

ionic-framework

angular

ionic4