离子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个名称的内联数组，但它们也可以通过web服务轻松返回)：

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中，以便不会向输出中添加不必要的元素。