Question

当我在Angular中创建输入元素时，它没有提供value属性。或任何其他属性，除非我手动执行。在那之后，它不会更新。通过ClassName获取元素并说出.getAttribute("value")只会返回其初始值。

我已经使用node.setAttribute("value","")手动设置了value属性。键入textbox将显示您键入的内容，但控制台记录该元素值仅显示其初始值。它可以与getElementsByTagName一起使用，但是我不能使用它

创建文本框

var node;
for (let index = 0; index < 5; index++) {
  node = document.createElement("input")
  node.setAttribute("class", "input");
  node.setAttribute("value", "");
  document.getElementById("boxesDiv").appendChild(node);
}

在keydown事件中，在输入框后检查框的值

var arr = document.getElementsByClassName('input');
for (let index = 0; index < arr.length; index++) {
  if (arr[index].getAttribute("value") != "") {
    filledCount++;
    console.log("count++")
  }
}

当它看到textbox中包含值/某物时，会将其预期到控制台日志“ count ++”。

Answer 1

您可以按以下方式在Angular Way中进行此操作。

import { ElementRef } from '@angular/core';

export class YourComponent {

  constructor(private el: ElementRef) {}

  countFilledInputs(): void {
    let arr = this.el.nativeElement.querySelectorAll('input');
    let filledCount = 0
    for (let i = 0; i < arr.length; i++) { 
        if (arr[i].value !== "") { 
          filledCount++; 
        }
    }
    console.log("Filled Input Count => " + filledCount);
  }
}

StackBlitz Demo

在Angular中获取动态添加的文本框值

1 个答案: