*ngFor 在每个 "n" 个单元格中创建新行

Question

我正在尝试以动态方式创建 table 的元素，但我有疑问。

如何创建新的 <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>

编辑2： 我添加了

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

这是一个外部 class（我已经在 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>

问题在return

谢谢

Answer 1

不要在 <tr> 或 <td> 中使用 *ngFor，而是在 <template> 中使用它，具体取决于 index 或找到的记录数量您可以选择渲染 <td> 或 <tr>.

按照这个 tutorial/guide 来解释这件事：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>

这个最后的例子是tutorial/guide我链接你的最终代码。我用过它，所以当你到达这一点时，你就有了一个友好的代码。

选项 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 中，类似于：

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

更新：

试试 innerHTML:

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

更新二：

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

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>

*ngFor 在每个 "n" 个单元格中创建新行

*ngFor create new row each "n" cells

ngfor

angular