*ngFor 每“n”个单元格创建新行

Question

我正在尝试动态创建表格的元素，但我有疑问。

如何创建新的<tr>，例如每个 4 个<td>，然后继续创建新的<td>

 <table>
    <tr>
    <td class="category-card" *ngFor= "let category of categories">

             <img class="product-card-image" src="{{category.icon}}">
             <span class="barImage">{{category.title}}</span>
    </td>
    </table>

编辑：

<table>     
<ng-template *ngFor="let category of categories; let i = index">
            <tr *ngIf="(i % 4) == 0">
                <td class="product-card">
                    <img class="product-card-image" src="/app/assets/img/{{category.icon}}.png">
                    <span class="barImage">{{category.titulo}}</span>
                </td>
            </tr>
        </ng-template>
    </table>

EDIT2： 我添加了

<table [outerHTML]="categorias | dynamicTablePipe"></table> on my html

这是一个外部类（我在 NGModule 上声明过）

@Pipe({
    name: 'dynamicTablePipe'
})
export class DynamicTablePipe implements PipeTransform{
    transform(contents) {
        let template = ``;
        let index = 0;
        for (let content of contents) {
            let currentTemplate = ``;
            if (index === 0) {
                // check if first record
                currentTemplate = `
                    <tr>
                        <td class="product-card">
                            <img class="product-card-image" src="/app/assets/img/${content.icono}.png">
                            <span class="barImage">${content.titulo}</span>
                    </td>`;
            } else if ((index % 4) === 0) {
                // check if multiple of 4
                currentTemplate = `
                    </tr>
                    <tr>
                   <td class="product-card">
                            <img class="product-card-image" src="/app/assets/img/${content.icono}.png">
                            <span class="barImage">${content.titulo}</span>
                    </td>`;
            } else {
                // normal row
                currentTemplate = `
                    <td class="product-card">
                            <img class="product-card-image" src="/app/assets/img/${content.icono}.png">
                            <span class="barImage">${content.titulo}</span>
                    </td>`;
            }
            index++;
            template += currentTemplate;
        }
        return template;
    }
}

管道内的代码工作正常，这是最后形成的模板字符串：

 <tr>
                            <td class="product-card">
                                <img class="product-card-image" src="/app/assets/img/smartphone.png">
                                <span class="barImage">Telefonia</span>
                        </td>
                        <td class="product-card">
                                <img class="product-card-image" src="/app/assets/img/gamepad.png">
                                <span class="barImage">Videojuegos</span>
                        </td>
                        <td class="product-card">
                                <img class="product-card-image" src="/app/assets/img/laptop.png">
                                <span class="barImage">Portatiles</span>
                        </td>
                        <td class="product-card">
                                <img class="product-card-image" src="/app/assets/img/speaker.png">
                                <span class="barImage">Reproductores</span>
                        </td>
                        </tr>
                        <tr>
                       <td class="product-card">
                                <img class="product-card-image" src="/app/assets/img/link.png">
                                <span class="barImage">Redes</span>
                        </td></tr>

问题出在回归的那一刻

谢谢

Answer 1

不要在<tr> 或<td> 中使用*ngFor，而是在<template> 中使用它，并根据index 或找到的记录数量选择呈现<td> 或<tr> .

按照本教程/指南来解释这个确切的事情：https://toddmotto.com/angular-ngfor-template-element

请记住，对于 Angular v4 使用 <ng-template> 或对于 Angular v2 使用 <template>。

最后，你可以有类似的东西：

<ng-template ngFor let-i="index" let-c="count" let-contact [ngForOf]="contacts | async">
    <tr *ngIf="if((i % 4) == 0)">
        // Check if index is multiple of 4
    </tr>
</ng-template>

最后一个示例是我链接到您的教程/指南的最终代码。我使用它，所以当你到达这一点时，你有一个友好的代码。

选项 2：

使用<template>，您可以构建一个指令来呈现数据。

所以你会有类似的东西：

<template [myDirective]="myData"></template>

在您的 myDirective 逻辑中，您选择了如何使用数据循环中的索引来呈现数据。

选项 3 - @Pipe：

@Pipe 可能是正确的！你可以试试这样的：

@Pipe({
    name: 'renderTable'
})
class RenderTable {
    transform(content) {
        let template = ``;
        let index = 0;
        for (let row in content) {
            let currentTemplate = ``;
            if (index === 0) {
                // check if first record
                currentTemplate = `
                    <tr>
                        <td>${row}</td>`;
            } else if ((index % 4) === 0) {
                // check if multiple of 4
                currentTemplate = `
                    </tr>
                    <tr>
                    <td>${row}</td>`;
            } else {
                // normal row
                currentTemplate = `
                    <td>${row}</td>`;
            }
            index++;
            template += currentTemplate;
        }
        return template;
    }
}

在您的表格中，类似于：

<table [outerHTML]="categories | renderTable"></table>

更新：

试试innerHTML:

<table [innerHTML]="categories | renderTable"></table>

更新 2：

对于样式丢失问题，这里是解决方案！找到了！

In RC.1 some styles can't be added using binding syntax

Answer 2

这就是我解决的方法，它不是优化的解决方案，但我得到了解决。希望能帮到你。

<table class="table table-bordered">
  <ng-container *ngFor="let item of categories; let i = index">
    <tr *ngIf="((i % 4) == 0)">
      <ng-container *ngFor="let item of categories; let j = index">
        <td *ngIf="j >= i && j < i+4">
          <label>
            <input type="checkbox" [value]="item.id">{{item.name}}
          </label>
        </td>
      </ng-container>
    </tr>
  </ng-container>
</table>