如何在html元素中增加相同的值？
如何在html元素中增加相同的值？
提问于 2018-08-07 00:37:00
我有一个来自客户端的不可更改的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>
Stack Overflow用户
发布于 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())
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001968
复制相关文章
相似问题