Question

我以数组[ 'one', 'two', 'three', 'four', 'five', 'six']的形式获取数据，我想以表格格式显示数据，如下所示，

    <table>
    <caption> Numbers:</caption>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
    </table>

以上模板可以使用ngFor和ngIf动态生成吗？

因此，在每个（index％3）= 0处，我们都将绘制新行，但是如何在带有Angular指令的HTML中这样做呢？

这里的窍门是传入数组可能具有任意数量的字符串。

Answer 1

customUIView.layer.borderColor = UIColor.blue.cgColor

我还没有测试过，但是应该这样做。

Answer 2

尝试一下（TS文件）：

  data = ['one', 'two', 'three', 'four', 'five', 'six'];
  results: any[] = [];

  constructor() {
    this.results = this.groupColumns(this.data);
  }

  groupColumns(arrays) {
    const newRows = [];
    for (let index = 0; index < arrays.length; index += 3) {
      newRows.push(arrays.slice(index, index + 3));
    }
    return newRows;
  }

在HTML中：

<table>
    <caption> Numbers:</caption>
    <tr *ngFor="let result of results">
        <td>{{result[0]}}</td>
        <td>{{result[1]}}</td>
        <td>{{result[2]}}</td>
    </tr>
</table>

Working Demo

如何使用带有Angular的字符串数组在HTML模板中显示具有3列的表格？

2 个答案: