使用slice拆分2d数组typescript html

Question

我试图在我的slice页面视图中拆分矩阵的列。如果输入slice:0:1，页面只显示第一列。但是我不明白为什么如果我尝试选择slice:1:2，它不会只显示第二列，但仍然只有第一列。2:3、3:4等也一样。

<div class="container">    
<tr *ngFor="let row of matrix; index as r">
<td *ngFor="let column of row|slice:0:1; index as c">

<select [(ngModel)]="object[r][c]">
{{r}}{{c}}
</select>

</td>
</tr>
</div>

ngOnInit() {
for (let r = 0; r < 6; r++) {
this.normalizedMatrix.push([0, 0, 0, 0, 0, 0])
this.matrix[r] = []
this.object[r] = {}
this.object[r][r] = 1
for (let c = 0; c < 6; c++) {
if (r == c) {
this.matrix[r].push(1)
this.object[r][c] = 1
}
if (r > c) {
this.matrix[r].push(1 / 9)
this.object[r][c] = 1 / 9
}
else if (r < c) {
this.matrix[r].push(9)
this.object[r][c] = 9
}
}
}
this.onSelectChange(0, 0)
}

Answer 1

下面是管道的一个工作示例。似乎你只是在看列索引值，它会随着管道值而改变。这是因为切片管道的行为类似于js的切片，它"创建一个包含元素子集(切片)的新数组或字符串"。ng文档

//component.html
<div class="container">
<tr *ngFor="let row of matrix; index as r">
<td *ngFor="let column of row|slice:1:2; index as c">
<p>R: {{r}} C: {{c}} - {{column}}</p>>
</td>
</tr>
</div>

//component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
matrix = [
['row 1 col 1', 'row 1 col 2'],
['row 2 col 1', 'row 2 col 2'],
['row 3 col 1', 'row 3 col 2']
];
}