使用单个数组angular component.html显示矩阵

作者: 不想吃东西
发布时间: 2024-01-12 02:01:53 (5月前)
转自：

4 条回复

0#
回复此人
无思 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果要在模板中显示矩阵而在打字稿一侧没有任何逻辑，则可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" rel="nofollow noreferrer"> Array.prototype.slice </A> 只要你的行数生成一个数组。然后使用。迭代该数组 <code> ngFor </code> 并从中获取索引 <code> index </code> 变量，这将是你的行索引。 </p> <P> 然后用内心 <code> ngFor </code> 和 <code> slice </code> 再次从您的数组和行索引获取行。 </p> <P> 你只需要设置 <code> n </code> 到每行的项目数： </p> <pre> <code> <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> </code> </pre> <BLOCKQUOTE> <P> 看到这个 <a href="https://stackblitz.com/edit/angular-template-matrix-from-array" rel="nofollow noreferrer"> stackblitz演示 </A> 。 </p> </BLOCKQUOTE> <P> 但是，我认为更优雅的解决方案是在typescript中从数组创建一个矩阵，然后简单地迭代行和列： </p> <pre> <code> 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)); </code> </pre> <pre> <code> <div *ngFor="let row of matrix"> <span *ngFor="let x of row">{{ x }}</span> </div> </code> </pre> <P> 或者您可以使用角度管道创建该矩阵，类似于此，行长度为4： </p> <pre> <code> <div *ngFor="let row of arr | toMatrix:4"> <span *ngFor="let x of row">{{ x }}</span> </div> </code> </pre> <P> 然后管道将保持逻辑以创建矩阵： </p> <pre> <code> @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)); } } </code> </pre> </DIV>

编辑
1#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以简单地使用 <code> % </code> 运营商。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> let nmatrix = (n) => { let temp = [] for(let i=1;i <1+(n*n); i++){ temp.push(i) if(i % n === 0) { console.log(...temp) temp = [] } } } nmatrix(4) </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
2#
回复此人
明月清风上善若水自由如风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以通过以下方式实现它。我将展示两个示例，一个是2d数组，另一个是单个数组。 </p> <P> 2d阵列 </p> <pre> <code> var a = [[1,2,3],[4,5,6]]; now to get an element placed at Xth row and Yth column you will use a[X-1][Y-1] e.g. to get element form 1st row and 2nd column we will print a[1-1][2-1] = a[0][1]; </code> </pre> <P> 1D阵列 </p> <pre> <code> var a = [1,2,3,4,5,6]; now to achieve 2D like functionality first define the strength of row. let that be L. In our case strength of row will be L = 3. now to get an element placed at Xth row and Yth column you will use a[Z*(X-1)+ (Y-1)] e.g. to get element form 1st row and 2nd column we will print a[3*(1-1) + (2-1)] = a[1]; </code> </pre> </DIV>

编辑

登录后才能参与评论