为什么Angular一直从子视图上的数组中取出第一个对象，而子.ts文件却从正确的对象中打印信息? &

Question

被点击的任何对象的卡片都将把该对象的信息打印到控制台，但是子视图将只显示它所提取的数组中第一个对象的信息。我将包括所有的页面，从上到下。图片示例靠近文章底部

祖父母视图的相关部分:

<div class="list">
<app-animal-list-item *ngFor="let item of apiService.items; even as isEven"
[class.rightBorder]="isEven" [item]="item"></app-animal-list-item>
</div>

(祖父母没有任何属于这些子节点的。ts代码)

父视图(app-animal-list-item):

<div class="container" (click)="showPage()">
<p id="name">{{ item.attributes.name }}</p>
<img src="{{ item.attributes.pictureThumbnailUrl }}" alt="No Picture Provided">
<p id="distance">{{ item.attributes.distance }} miles</p>
</div>
<app-animal-page [animal]="item"></app-animal-page>

Parent .ts file(app-animal-list-item):

@Input() item: any;
@ViewChild(AnimalPageComponent) 
child!: AnimalPageComponent;
constructor() { }
ngOnInit(): void {
}
showPage(){
this.child.toggleDisplay();
}

子视图(app-animal-page):

<div class="hide" id="container">
<img src="{{ animal.attributes.pictureThumbnailUrl }}" alt="No Picture Provided">
<span><p>{{ animal.attributes.name }}</p><p>{{ animal.attributes.ageString }}</p></span>
</div>

Child .ts文件(app-animal-page):

@Input() animal: any;
container!:any;
constructor() { }
ngOnInit(): void {
this.container = document.getElementById("container");
}
toggleDisplay() {
console.log(this.animal.attributes.name);
console.log(this.animal.attributes.pictureThumbnailUrl);
this.container.classList.toggle("hide");
}

Pic显示控制台和显示
当点击任何动物的卡片时，将显示左下角的第一个动物(控制台中显示的数组中的第一个对象)图片。然而，正确的动物信息会在点击时打印到控制台上。

有人能解释一下为什么会这样吗?非常感谢您的帮助。

Answer 1

document.getElementById("container")正在提取页面上具有该ID的第一个元素。ID应该是唯一的，但如果你多次使用这个组件，那么它们都将具有相同的"容器"。ID。

我建议使用一个变量来设置类，而不是与classList

切换。

<div [class.hide]="hidden" id="container">
<img src="{{ animal.attributes.pictureThumbnailUrl }}" alt="No Picture Provided">
<span><p>{{ animal.attributes.name }}</p><p>{{ animal.attributes.ageString }}</p></span>
</div>

@Input() animal: any;
container!:any;
hidden: boolean = false;
constructor() { }
ngOnInit(): void {
this.container = document.getElementById("container");
}
toggleDisplay() {
console.log(this.animal.attributes.name);
console.log(this.animal.attributes.pictureThumbnailUrl);
this.hidden = !this.hidden;
}