显示列表元素的附加信息[Angular]

Question

我正在学习Angular，我尝试创建一个小项目。我使用以下代码:

TS:

export class Basic implements OnInit {
products:any[];
hide: boolean = true;
constructor() {
this.products=[
{
name:"Mac Book Pro",
price:"1000",
color:"grey"
},
{
name:"iPhone",
price:"700",
color:"black"
}
]
}
ngOnInit(): void {
}

toggle(){
this.hide=!this.hide;
}
}

HTML:

<div *ngFor="let x of products">
<div (click)="toggle()">{{x.name}}</div>
<div [hidden]="hide">
{{x.price}}
{{x.color}}
</div>
</div>

因此，代码生成了一个产品列表。我的目标是，一旦我点击一个产品，得到它下面的附加信息。但我想不出如何只针对一种元素。目前，当我按下第一个元素时，它也会显示第二个元素的信息。

Answer 1

问题是所有项目只有一个变量hide。你可以在模型中添加一个额外的属性比如isOpen:

<div *ngFor="let x of products;">
<div (click)="toggle(x)">{{x.name}}</div>
<div [hidden]="!x.isOpen">
{{x.price}}
{{x.color}}
</div>
</div>
toggle(x){
x.isOpen = !x.isOpen
}

这是我为您创建的工作示例: