テーブルの要素を動的に作成しようとしていますが、疑問があります。
<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>
問題は戻る瞬間にある
ありがとう
代わりに使用しての*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({
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:
スタイル崩れ問題の解決策はこちら！それを見つけた！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加