离子3多线段

Question

这是我的代码：

<ion-segment [(ngModel)]="selectedName" (ionChange)="nameSelected($event)">
    <ion-segment-button *ngFor="let name of names" [value]="name">
      {{name}}
    </ion-segment-button>
</ion-segment>

列表“名称”有12个项目。我想在每一行显示3个“离子段按钮”。

请帮忙吗？

由于

Answer 1

方法是预处理“名称”数组，然后使用嵌套的*ngFor以3个为一组进行渲染。

这是一个说明所需结果的示例： https://embed.plnkr.co/qcyHUsjEhAVAU2q9Jxj8/

主要更改在TypeScript和HTML模板中;首先是TS（我已经嘲笑了12个名字的内联数组，但它们很容易通过网络服务返回）：

this.names = [
      {name: 'one'},
      {name: 'two'},
      {name: 'three'},
      {name: 'four'},
      {name: 'five'},
      {name: 'six'},
      {name: 'seven'},
      {name: 'eight'},
      {name: 'nine'},
      {name: 'ten'},
      {name: 'eleven'},
      {name: 'twelve'}
    ]
    this.segmentsPerRow = 3
    this.rows = Array.from(Array(Math.ceil(this.names.length / this.segmentsPerRow)).keys())

值得注意的部分是最后一行，它基本上将数组拆分为rows，每个包含最多3个段名称选择器的名称;您也可以使用segmentsPerRow变量自定义组大小。请注意，如果您的总项目数不能被segmentsPerRow值整除，则最后一行将相应调整每个项目的大小以填充可用空间。

然后密钥更改为HTML模板：

<ion-segment [(ngModel)]="selectedName" *ngFor="let i of rows">
      <ng-container *ngFor="let name of names | slice:(i*segmentsPerRow):(i+1)*segmentsPerRow">
        <ion-segment-button value="{{name.name}}">
          {{name.name}}
        </ion-segment-button>
      </ng-container>
    </ion-segment>

首先，通过*ngFor="let i of rows"对每一行重复一次片段，然后在每个片段中，其中的3个项目按照离子标记获得自己的按钮;这些都包含在ng-container中，以免在输出中添加不必要的元素。