是否有一些类似于JavaScript .querySelectorAll（）的东西？

joesalaz 发表于 Dev

乔萨拉兹

我已经用JavaScript创建了一个库存计算器，该计算器根据重量给出了物品的数量。它有4个输入。我想用角度创建相同的计算器。有没有一种方法可以获取像JavaScript中的.querySelectorAll（）一样的元素数组，但是在Angular中呢？下面是我的JavaScript代码。我真的很想知道我是否可以使用Angular完成相同的任务。这是到计算器的链接，以更好地了解其功能。

let message = document.getElementById('message');
let IDs = document.getElementById('IDs')
.querySelectorAll(
  "#contrlQty, #ctrl-Wt, #massWt, #singlWt, #output, #message"
  );   

  input = () => {
     message.innerHTML = ""; //Message is Gone!
   }

calculate = () => {
if(IDs[2].value == "" && IDs[3].value == "" && isNaN(IDs[4])){
message.innerHTML = "You must enter at least a mass weight and a single object weight value";
 return false;
}

  let count = IDs[4];
   if(IDs[0].value > 0 && IDs[1].value > 0){   
     message.innerHTML = "";                         
  IDs[3].value = IDs[1].value / IDs[0].value; 
  let result = IDs[2].value / IDs[3].value;
  let n = result.toFixed(0);  
  
  count.innerHTML = n;
}

  else if(IDs[0].value == 0 && IDs[1].value == 0) 
  {
  let result = IDs[2].value / IDs[3].value;
  let n2 = result.toFixed(0);
  count.innerHTML = n2;
  }
}

 reset = () => {
     
 IDs[0].value = 0;
 IDs[1].value = "";
 IDs[2].value = "";
 IDs[3].value = "";
 IDs[4].innerHTML = 0;
          
}

Mj Jameel

这是一个stackBlitz，它接受一个数组并创建，然后FormArray onInit将其推入dom。我还添加了一个按钮，该按钮将记录值并在DOM上显示它们

https://stackblitz.com/edit/angular-ivy-dx6j6g

请放下ts文件代码和HTML，以防万一stackblitz决定再次搞砸。

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  numberOfFields = 5;
  values = []
  inputs: FormArray;
  ngOnInit() {
    this.inputs  = new FormArray([])

    for(let i=0; i < this.numberOfFields; i++){
      this.inputs.push(new FormControl(null))
    }
  }

  getControl(i) {
    return this.inputs.at(i) as FormControl;
  }

  getValues() {
    this.values = [...this.inputs.value]
  }
}

<div class="formInput" *ngFor="let input of inputs.controls; index as i">
  <input [formControl]="getControl(i)">
</div>

<button (click)="getValues()">get values</button>
<hr>

<p *ngFor="let val of values">{{val}}</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。