我想知道是否有可能创建 .我需要一个不同的 css 类到 ng-content 的每个元素,所以我需要对 ng-content 的每个元素进行循环。可能吗?
现在我将一个参数传递给子元素以枚举他,但我想在没有数字的情况下这样做。这是我的代码:
<sys-tab [tabs]="['Principal', 'Complementar']">
<sys-tab-content [num]="1">
<sys-panel header="Dados Gerais">
<sys-input-text header="Nome" tam="1"></sys-input-text>
<sys-input-mask header="CNPJ"></sys-input-mask>
<sys-input-mask header="CNES"></sys-input-mask>
<sys-input-mask header="Telefone"></sys-input-mask>
<sys-input-text header="Email"></sys-input-text>
</sys-panel>
</sys-tab-content>
<sys-tab-content [num]="2">
<sys-input-text header="Email"></sys-input-text>
</sys-tab-content>
</sys-tab>
如您所见,我将数字传递给 child ,以便我可以识别出他是谁,但我想为 ng-coontent 创建一个循环,以便我可以为每个“sys-tab-content”添加一个不同的类"
最佳答案
带有动态 ngTemplate 的简单列表示例
应用程序组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
items = [ { name: 'abc' }, { name: 'cdf' }, { name: 'fgh' } ];
}
app.component.html
<nu-list [itemTpl]="itemTpl" [items]="items"></nu-list>
<ng-template let-item #itemTpl>
<h1>{{item.name}}</h1>
</ng-template>
列表.组件.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'nu-list',
templateUrl: './list.component.html'
})
export class ListComponent {
@Input() itemTpl;
@Input() items;
}
list.component.html
<ng-container *ngFor="let item of items">
<ng-container *ngTemplateOutlet="itemTpl; context: {$implicit: item}"></ng-container>
</ng-container>
示例链接:https://stackblitz.com/edit/angular-list-ngtemplateoutlet
关于javascript - *ngFor 在 ng-content Angular 的元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46285533/