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

Question

我正在尝试在列表中的某些位置插入分隔符/分隔符。我将列表绑定到一个 observable，但是其中一些条目是分隔符，我想让它们成为 ion-divider 类型。

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

上一个：

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