Exibição de dados semelhante a Jiugongge: cada linha exibe até 3

O projeto encontrou tal requisito: um dos campos nos dados consultados é uma matriz de imagens, mas quando a página de detalhes anterior é exibida, o seguinte layout é necessário:

Cada linha exibe até 3 imagens, de modo que cada linha é a saída percorrida e cada célula também é a saída percorrida, mas o campo de imagem de dados é uma lista de matriz simples e não há como agrupar a cada três elementos; portanto, no final, apenas pode alterar a estrutura de dados na matriz, ou seja, transformar uma matriz unidimensional em uma matriz bidimensional:

Matriz unidimensional: [a, b, c, d, e, f, g, .....]

Matriz bidimensional: [[a, b, c], [d, e, f], [g, h, i] ....]

Se for percorrido assim, ficará bem;

Eu uso angular6 para a extremidade dianteira, que é muito conveniente para atravessar;

Primeiro, existem três variáveis ​​no código;

mydiary: any;
  size = 3;
  imgs: any[] = [];

O campo momentAttachmentList no objeto mydiary é uma matriz de imagens;

tamanho: o número exibido em cada linha; se 3 não for suficiente, você pode definir mais;

imgs: nova matriz para armazenar fotos

Aproximação:

// 格式化图片成九宫格
  formartImgs(): void {
    if (this.mydiary.momentAttachmentList && this.mydiary.momentAttachmentList.length > 0) {
      for (let index = 0; index < this.mydiary.momentAttachmentList.length; index += this.size) {
        const element = this.mydiary.momentAttachmentList[index];
        this.imgs.push(this.mydiary.momentAttachmentList.slice(index, index + this.size));
      }
    }

  }

O código de passagem da página anterior:

<ion-grid>
    <ion-row *ngFor="let imgsRow of imgs">
            <ion-col col-4 col-sm *ngFor="let img of imgsRow">    
                <img [src]="img.thumbnailPhoto">    
            </ion-col>
    </ion-row>
 </ion-grid>