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

不是使用*ngFor或<tr>中的<td>，而是在<template>中使用它，具体取决于index或您发现的记录数量选择呈现<td>或<tr>。

按照本教程/指南解释这个问题：https://toddmotto.com/angular-ngfor-template-element

记住将<ng-template>用于Angular v4或<template>用于Angular v2。

最后，您可以拥有类似的内容：

<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>

* ng为每个创建新行＆＃34; n＆＃34;细胞

2 个答案: