Css Angular中嵌套数组的网格

我们只需要有一套内部分区.您有一个嵌套的迪瓦 struct ，所以它会扰乱布局.我使用ng-container作为内部for循环，ng-container的特点是它不会在HTML中创建元素，所以我们只需使用它来运行for循环并创建一组divs.

此外，当您创建属性[style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" 时，请确保字符串和JavaScript变量之间有明确的区分.

之前的代码只将repeat(outerArray.length, 1fr)呈现为字符串，而不是插入outerArray长度，因此我将代码更改为 'repeat('(字符串)+ outerArray.length(数字)+'，1 fr '(字符串)

我们还需要[style.grid-template-rows]，其配置与列相同.

如果您希望所有行的高度相同，请使用提供的注释CSS，它会向元素添加省略号并使所有单元格高度相同！

完整代码:完整代码:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
  #container {
    display: grid;
  }
  /* .same-height {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  } */
  `],
  template: `
    <div id="container" [style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" [style.grid-template-rows]="'repeat('+outerArray.length+', 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0">
      <ng-container class="outerArray" *ngFor="let inner of outerArray">
        <div *ngFor="let item of inner" style="background-color: red;color: white; margin-bottom:2px;" class="same-height">
          {{item}}
        </div>
      </ng-container>
    </div>
  `,
})
export class App {
  outerArray = [
    ['short', 'bit longer', 'example value'],
    ['not so long, but longer string', 'short words', 'bitLonger twoWords'],
    ['shorter array', 'different lengths of strings'],
    ['another shorter array', 'string'],
  ];
}

bootstrapApplication(App);

Stackblitz Demo