Angular: 如何在没有事件的情况下获取 *ngFor DOM 元素后面的对象?
Angular: How to get object behind *ngFor DOM element without an event?
如何根据 dom 元素的 ID 或其他不涉及事件的东西访问 dom 元素后面的对象?
例如我有:
arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
{{obj.a}}
</li>
document.getElementById("1");
但我希望能够访问与 li DOM 元素关联的属性 a 和 b
编辑:问题不够清楚所以我会尝试扩展。你通常会做什么
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}" (click)="somefunc(obj)">
{{obj.a}}
</li>
然后我可以在我的函数中访问 obj
somefunc(obj) {
console.log(obj.a);
}
我想在没有点击事件或任何其他事件的情况下实现我在 somefunc
中所做的事情。例如,我可以通过 document.getElementById("1");
或 this.eleRef.nativeElement.querySelector('#1')
访问 DOM 元素 li 但我想访问与 DOM 元素关联的对象,所以我想成为能够做这样的事情。
somefunc2() {
let el = document.getElementById("1");
console.log(obj.a associated with el);
}
如果您知道 ID,请在您的数据源中使用数组 find
。
const trgItem = arr1.find(item => return item.a === 1);
您还应该以这种方式更改您的 html 以正确设置 ID:
<ul>
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
{{obj.a}}
</li>
<ul>
如果知道索引,就用数组的indexOf(0)
函数。
如果你想在某事发生时得到它,那么你只能通过事件来实现。
它不起作用,因为你没有插入 id...
您的 html 应该是:
<li *ngFor="let obj of arr1; index as indexObj" id="{{indexObj}}">
{{obj.a}} //also you had a typo here (ibj instead of obj)
</li>
编辑更新的问题:
因为您知道 ID,要检索数组中的项目,您可以这样做:
const arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];
const id = 1;
const item = arr1[id];
console.log(item, item.a, item.b);
我创建了 stackblitz 工作示例供您使用,像这样修改您的组件代码-
arr1 = [{ a: 1, b: 2 }, { a: 5, b: 10 }, { a: 20, b: 50 }];
ngAfterViewInit() {
const val = Number(document.getElementById('1').innerHTML);
console.log(this.arr1.find(ele => ele.a === val)); // you'll get the object here.
}
您可以通过使用@ViewChild
和@ViewChildren
来获取元素的对象或获取所有子元素
@ViewChildren:
@Component({
selector: 'my-app',
template: `
<alert></alert>
<alert type="danger"></alert>
<alert type="info"></alert>
`,
})
export class App {
@ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>
ngAfterViewInit() {
// Here you get all instances of the alert component
this.alerts.forEach(alertInstance => console.log(alertInstance));
}
}
如何根据 dom 元素的 ID 或其他不涉及事件的东西访问 dom 元素后面的对象?
例如我有:
arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
{{obj.a}}
</li>
document.getElementById("1");
但我希望能够访问与 li DOM 元素关联的属性 a 和 b
编辑:问题不够清楚所以我会尝试扩展。你通常会做什么
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}" (click)="somefunc(obj)">
{{obj.a}}
</li>
然后我可以在我的函数中访问 obj
somefunc(obj) {
console.log(obj.a);
}
我想在没有点击事件或任何其他事件的情况下实现我在 somefunc
中所做的事情。例如,我可以通过 document.getElementById("1");
或 this.eleRef.nativeElement.querySelector('#1')
访问 DOM 元素 li 但我想访问与 DOM 元素关联的对象,所以我想成为能够做这样的事情。
somefunc2() {
let el = document.getElementById("1");
console.log(obj.a associated with el);
}
如果您知道 ID,请在您的数据源中使用数组 find
。
const trgItem = arr1.find(item => return item.a === 1);
您还应该以这种方式更改您的 html 以正确设置 ID:
<ul>
<li *ngFor="let obj of arr1; let indexObj=index" id="{{indexObj}}">
{{obj.a}}
</li>
<ul>
如果知道索引,就用数组的indexOf(0)
函数。
如果你想在某事发生时得到它,那么你只能通过事件来实现。
它不起作用,因为你没有插入 id...
您的 html 应该是:
<li *ngFor="let obj of arr1; index as indexObj" id="{{indexObj}}">
{{obj.a}} //also you had a typo here (ibj instead of obj)
</li>
编辑更新的问题:
因为您知道 ID,要检索数组中的项目,您可以这样做:
const arr1 = [{a:1, b:2}, {a:5, b:10}, {a:20, b:50}];
const id = 1;
const item = arr1[id];
console.log(item, item.a, item.b);
我创建了 stackblitz 工作示例供您使用,像这样修改您的组件代码-
arr1 = [{ a: 1, b: 2 }, { a: 5, b: 10 }, { a: 20, b: 50 }];
ngAfterViewInit() {
const val = Number(document.getElementById('1').innerHTML);
console.log(this.arr1.find(ele => ele.a === val)); // you'll get the object here.
}
您可以通过使用@ViewChild
和@ViewChildren
@ViewChildren:
@Component({
selector: 'my-app',
template: `
<alert></alert>
<alert type="danger"></alert>
<alert type="info"></alert>
`,
})
export class App {
@ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>
ngAfterViewInit() {
// Here you get all instances of the alert component
this.alerts.forEach(alertInstance => console.log(alertInstance));
}
}