我正在使用 Angular 2 和 TypeScript,我正在尝试实现一个动态类。
这是我的组件 HTML:
<main class="pure-g">
<div *ngFor="let ex of exs; let i = index; trackBy: index" [className]='columns(i)'>
{{ex.name}} | {{ex.parts}}
</div>
</main>
这是我的 TS:
exs: Object[] = [
{name: 'ex1', parts: ['upper', 'lower']},
{name: 'ex2', parts: ['upper', 'lower']},
{name: 'ex3', parts: ['upper', 'lower']},
{name: 'ex4', parts: ['upper', 'lower']},
{name: 'ex5', parts: ['upper', 'lower']},
{name: 'ex6', parts: ['upper', 'lower']},
{name: 'ex7', parts: ['upper', 'lower']}
];
private _reminder: number = this.exs.length % 6;
private _className: string = "pure-u-";
columns(index) {
let _class: string;
if (index <= 5) {
_class = this._reminder === 0 ? this._className + "1-6" : this._className + "1-" + this._reminder;
} else {
_class = this._className + "1-" + this._reminder;
}
return _class;
}
我的目标是为每个项目执行列函数,将其索引传递给函数,以便每个项目评估不同的类。我得到的结果实际上是:
pure-u-1-1
对于每一项,函数的执行似乎返回绑定(bind)到所有项的 className,而不是每个项。
我认为的实际结果是这样的:
itemOne iteration -> call columns(index=0) -> return 'pure-u-1-6';
itemTwo iteration -> call columns(index=1) -> return 'pure-u-1-6';
itemThree iteration -> call columns(index=2) -> return 'pure-u-1-6';
itemFour iteration -> call columns(index=3) -> return 'pure-u-1-6';
itemFive iteration -> call columns(index=4) -> return 'pure-u-1-6';
itemSix iteration -> call columns(index=5) -> return 'pure-u-1-6';
itemSeven iteration -> call columns(index=6) -> return 'pure-u-1-1';
最佳答案
您可以在 HTML 中对其进行处理,如下所示,
<div *ngFor="let ex of exs; let i = index; trackBy: index"
[className]="i < exs.length-1 ? 'pure-u-1-6': 'pure-u-1-1' ">
{{ex.name}} | {{ex.parts}}
</div>
或者
columns(index) {
private _className: string = "pure-u-";
let _class: string;
if (index < this.exs.length-1) {
_class = this._className + "1-6"
} else {
_class = this._className + "1-" + this.exs.length-index;
}
return _class;
}
关于javascript - Angular 2 ngFor 中每个项目的函数调用返回值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40317852/