[英]Compilation error-Property value does not exist on type Element in angular 8
I have some checkboxes that is coming from an array of object.我有一些来自 object 数组的复选框。 I am appending the checkboxes through javascript queryselector into html, I cannot use angular here because I am using this with chart.
我通过 javascript 查询选择器将复选框附加到 html 中,我无法在此处使用 angular,因为我将其与图表一起使用。 When I am looping the queryselector checked value getting compilation error like 'Property value does not exist on type Element' Line-76.
当我循环查询选择器检查值时,会出现编译错误,例如“类型元素上不存在属性值”第 76 行。 Here is the code below https://stackblitz.com/edit/angular-dxtbpb?file=src%2Fapp%2Fapp.component.ts
这是https://stackblitz.com/edit/angular-dxtbpb?file=src%2Fapp%2Fapp.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);
}
});
}
}
<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>
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.