我有一个来自客户端的不可更改的html,每个div有4个div,每个div都应该从服务器上获得增量数字,我使用角2来迭代数组中的4个数字,我试图使用相同的var来做这个,我不想用4个不同的值来改变它,我试图使用最好的方法来做这个,
*我不能为此使用ngor,因为html已经编码了很多块,我清理了html以解释我想要达到的结果的概念,最终的结果需要如下所示:
<div class="wrapper" >
<div class="stepper">
<div class="stepImage">1</div>
<div class="stepText">1</div>
</div>
<div class="stepper">
<div class="stepImage">2</div>
<div class="stepText">2</div>
</div>
<div class="stepper">
<div class="stepImage">3</div>
<div class="stepText">3</div>
</div>
<div class="stepper">
<div class="stepImage">4</div>
<div class="stepText">4</div>
</div>
</div>
到目前为止,我就是这样做的:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-exersice',
templateUrl: './exersice.component.html',
styleUrls: ['./exersice.component.css']
})
export class ExersiceComponent implements OnInit {
public incementalNum;
constructor() { }
ngOnInit() {
this.numberfill();
}
numberfill(){
let arrNums=[0,1,2,3];
for (let index = 0; index < arrNums.length; index++) {
this.incementalNum=arrNums[index];
}
}
}
<div class="wrapper" >
<div class="stepper">
<div class="stepImage">{{incementalNum}}</div>
<div class="stepText">{{incementalNum}}</div>
</div>
<div class="stepper">
<div class="stepImage">{{incementalNum}}</div>
<div class="stepText">{{incementalNum}}</div>
</div>
<div class="stepper">
<div class="stepImage">{{incementalNum}}</div>
<div class="stepText">{{incementalNum}}</div>
</div>
<div class="stepper">
<div class="stepImage">{{incementalNum}}</div>
<div class="stepText">{{incementalNum}}</div>
</div>
</div>
发布于 2018-08-07 09:59:17
如果你不能使用ngFor ,那么你唯一能做的就是使用arrNums[1]
你在组件中创建一个函数:
export class ExersiceComponent implements OnInit {
numArr: number[] = [1,2,3,4];
counter: number = 0;
getAndIncrement() {
const num = this.numArr[Math.floor(this.counter)];
this.counter += 0.5;
return num;
}
}
并在模板中调用它
<div class="stepper">
<div class="stepImage">{{getAndIncrement()}}</div>
<div class="stepText">{{getAndIncrement()}}</div>
</div>
但这可能会导致一些bug:
class ExersiceComponent {
constructor() {
this.numArr = [1, 2, 3, 4];
this.counter = 0;
}
getAndIncrement() {
const num = this.numArr[Math.floor(this.counter)];
this.counter += 0.5;
return num;
}
}
let e = new ExersiceComponent();
for (let i = 0; i < 8; i++) console.log(e.getAndIncrement())
https://stackoverflow.com/questions/-100001968
复制相似问题