Question

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

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

上一个：

<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离子列表中使某些项目分隔符

1 个答案: