如何在html元素中增加相同的值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (59)

我有一个来自客户端的不可更改的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>

提问于
用户回答回答于

如果你不能使用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())

扫码关注云+社区

领取腾讯云代金券