[英]Compilation error-Property value does not exist on type Element in angular 8
我有一些來自 object 數組的復選框。 我通過 javascript 查詢選擇器將復選框附加到 html 中,我無法在此處使用 angular,因為我將其與圖表一起使用。 當我循環查詢選擇器檢查值時,會出現編譯錯誤,例如“類型元素上不存在屬性值”第 76 行。 這是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>
這可能對您的情況有所幫助:
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.