Angular 6 将行转换为多列

Question

我正在处理一个应用程序，我正在尝试按照我想要的方式设置报告链接的格式。理想情况下，应该有 3 或 4 行，并且至少有 6 列宽。我知道我必须使用管道来帮助格式化，我只是无法理解逻辑。我尝试使用 angular 答案中的管道，但是它不起作用（不会显示任何行）。

这是我的 Angular 6 代码的代码示例：

<table>
  <tr *ngFor="let report of annualReports">
    <td><a href="#">{{ report.rptDisplayName }}</a> </td>
  </tr>
</table>

和管道：

@Pipe({ name: 'pairs' })
export class PairsPipe implements PipeTransform {
  transform(value: any) {
    return value.filter((v, i) => i % 2 == 0).map((v, i) => [value[i * 2], value[i * 2 + 1]])
  } 
}

Answer 1

您是否在 HTML 代码中应用了 'pairs'？此外，使用 CSS 网格或 bootstrap 可能很容易达到相同的效果。

Angular 6 将行转换为多列

Angular 6 Transform rows to multiple columns

angular

angular6

angular-pipe