时间戳

首页 > 解决方案 > 是否有类似于 JavaScript .querySelectorAll() 的角度？

javascript - 是否有类似于 JavaScript .querySelectorAll() 的角度？

问题描述

我在 JavaScript 中创建了一个库存计算器，它根据重量计算物品数量。它有 4 个输入。我想用角度创建相同的计算器。有没有办法在 .querySelectorAll() 中使用 JavaScript 但在 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;
          
}

标签： javascriptarraysangular

解决方案

这是一个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>

推荐阅读