javascript - Compilation error-Property value does not exist on type Element in angular 8

Question

I have some checkboxes that is coming from an array of object. I am appending the checkboxes through javascript queryselector into html, I cannot use angular here because I am using this with chart. When I am looping the queryselector checked value getting compilation error like 'Property value does not exist on type Element' Line-76. Here is the code below https://stackblitz.com/edit/angular-dxtbpb?file=src%2Fapp%2Fapp.component.ts

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  ngOnInit() {
    let Obj = [
      {
        mainitem: "My item 2",
        id: 1,
        Seconditem: {
          createddate: "30-01-02",
          enddate: "30-01-03"
        }
      },
      {
        mainitem: "My item 2",
        id: 2,
        Seconditem: {
          createddate: "29-01-02",
          enddate: "29-01-03"
        }
      },
      {
        mainitem: "My item 2",
        id: 3,
        Seconditem: {
          createddate: "28-01-02",
          enddate: "28-01-03"
        }
      }
    ];

    const lines1 = [];

    const columns = {};
    Obj.reverse().forEach(col => {
      lines1.push("<div> id: " + col.id + "</div>");
      Object.keys(col.Seconditem).forEach(key => {
        columns[key] = true;
        const checked = columns[key] ? "checked" : "";
        lines1.push(
          `<label>
      <input class='menu-checkbox' type='checkbox' name='${key}' value='${
            col.id
          }' data-id='${col.id}' ${checked} >
      ${key}
      </label>`
        );
      });
    });

    document.getElementById("menu").innerHTML = lines1.join("<br>");
    const dropDown = document.querySelector("#menu");
    dropDown.setAttribute("style", "display:block;");
    dropDown.addEventListener("change", e => {
      const id = e.target.dataset.id;
      // find the object
      const o = Obj.find(o => o.id == id);
      // or find the index
      const oIndex = Obj.findIndex(o => o.id == id);
      // console.log(oIndex, ' - ', o);
      const result = [];
      const test = document.querySelector("#menu");
      const selectedColumns = test.querySelectorAll(":checked");
      const checkedColumns = {};
      // console.log(selectedColumns);
      if (e.target.value == o.id) {
        // console.log(e.target.value);
        selectedColumns.forEach(item => {
          //  console.log(item.value);
          if (item.value == o.id) {
            result.push(item.name);
          }
          // checkedColumns[item.name] = true;
        });
        console.log(result);
      }
    });
  }
}

app.component.html

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>
<div class="menu-outer-block">
    <div class="menu-block" id="menu-block">
        <div id="close-icon-milestone" class="close-icon">

        </div><br>
        <div id="menu"></div>

    </div>
</div>

Answer 1

that could help in your case:

       selectedColumns.forEach((item: HTMLInputElement) => {
          if (item.ATTRIBUTE_NODE.valueOf() == o.id) {
            result.push(item.name);
          }
          // checkedColumns[item.name] = true;
        });