javascript - 使用单个数组 Angular c​​omponent.html 显示矩阵

Question

我有一个数组，假设 [1,2,3,4,5,6,7,8,9,10] 想要在 angular 的 html 端创建 nxn 矩阵。

我知道我可以先将数组划分为 typescript 文件 [[1,2,3,4,5],[6,7,8,9,10]] 中的 2d 并迭代使用 *ngFor 处理 html 中的元素。

但我正在尝试找到一种方法来在 component.html 中使用单个数组来显示矩阵，而无需将其转换为二维数组。

输出:

1 2 3 4 5
6 7 8 9 10

Answer 1

如果你想在模板中显示矩阵而不需要 typescript 端的任何逻辑，你可以使用 Array.prototype.slice生成一个与您的行数一样长的数组。然后使用 ngFor 迭代该数组并从 index 变量中获取索引，这将是您的行索引。

然后再次使用内部 ngFor 和 slice 从数组中获取行和行索引。

您只需将 n 设置为每行的项目数:

<div *ngFor="let row of arr.slice(0, arr.length / n % 1 === 0 ? arr.length / n : arr.length / n + 1); let idx = index">
  <span *ngFor="let x of arr.slice(idx * n, idx * n + n)">{{ x }}</span>
</div>

See this stackblitz demo.

但是，我认为更优雅的解决方案是在 typescript 中从数组创建一个矩阵，然后简单地迭代行和列:

const arr = [1,2,3,4,5,6,7,8,9,10];
const n = 4;
const matrix = Array
  .from({ length: Math.ceil(this.arr.length / this.n) }, (_, i) => i)
  .map(i => this.arr.slice(i * this.n, i * this.n + this.n));

<div *ngFor="let row of matrix">
  <span *ngFor="let x of row">{{ x }}</span>
</div>

或者您可以使用 Angular 管道创建该矩阵，类似这样，行长为 4:

<div *ngFor="let row of arr | toMatrix:4">
  <span *ngFor="let x of row">{{ x }}</span>
</div>

然后管道将包含创建矩阵的逻辑:

@Pipe({
  name: 'toMatrix'
})
export class ToMatrixPipe implements PipeTransform {
  transform(arr: number[], n: number): number[][] {
    const rows = Array.from({ length: Math.ceil(arr.length / n) }, (_, i) => i);
    return rows.map(idx => arr.slice(idx * n, idx * n + n));
  }
}