[英]toggle down only one div from ng-container with *ngFor
I would like to toggle down only one div among multiple divs by clicking one of button 我想通过单击按钮之一在多个div中仅向下切换一个div
HTML code HTML代码
<ng-container *ngFor = "let m of images">
<button (click) = "toggle(m[m.length-1])"><img src = {{m[0]}}/></button>
<div id = "toggle" *ngIf = "chosen" [@toggle] = 'status'>
<ul>
<li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
</ul>
</div>
<br />
</ng-container>
In *ngFor = "let m of images, m is Array< string[]
> and at index 0 image is stored and at index 1 unique id is stored. So I get that id for function, toggle(). In toggle there is another Array< string[]
>, memberimages, that has 10 images from index 0 to 9 and have unqiue id at the last index. so compare id with id in this.memberimages and if it is same, then set chosen as true and save the matching string[] from this.memberimages to this.clicked and that is used in li tag.... hope the explanation is understandable.... :( 在* ngFor =“ let m of images,m is Array <
string[]
>并在索引0存储图像,并在索引1存储唯一ID。因此,我获得该ID的功能,toggle()。在toggle中有另一个Array < string[]
> memberimages,它具有10个从索引0到9的图像,并且在最后一个索引处具有unqiue id。因此,请比较id与this.memberimages中的id,如果相同,则将其设置为true并保存在li标记中使用了从this.memberimages到this.clicked的匹配字符串[]。...希望解释是可以理解的。...:(
toggle(id: string){
this.status = this.status === 'open' ? 'close' : 'open';
if(this.status != 'close')
{
this.memberimages.forEach((item, index) =>{
if(item[item.length-1] == id){
this.clicked = item;
this.chosen = true;
index = this.memberimages.length;
}
});
}
else
{
this.chosen = false;
}
}
Animation 动画
animations:[
trigger('toggle', [
state('open', style({
'opacity' : '1',
'display' : 'block'
})),
state('close', style({
'opacity' : '0',
'display' : 'none'
})),
transition('open => close', animate('1000ms ease-in-out', style({
'opacity':'0',
'display' : 'none'
}))),
transition('close => open', animate('1000ms ease-in-out', style({
'opacity':'1',
'display' : 'block'
})))
])
]
CSS for div id = "toggle" is simply display: none; 仅显示div id =“ toggle”的CSS:
what I expected was if I click one of buttons(5 in total), values should be toggled down under that button ONLY. 我所期望的是,如果我单击按钮之一(总共5个),则仅应在该按钮下向下切换值。 However, what is actually happening is that once I click one of the buttons, values are correct but every button had toggled div with same values at once and I don't see any animation effect How can I match one div one button so that each button has a right values and only toggled div?
但是,实际上发生的是,一旦我单击其中一个按钮,值是正确的,但是每个按钮都一次切换了具有相同值的div,而我看不到任何动画效果。如何匹配一个div一个按钮,以便每个按钮按钮具有正确的值,并且只能切换div?
PS: Apologize for my bad English.. :( PS:对我的英语不好表示歉意。
Try this 尝试这个
Create new variable 创建新变量
Toggle =[]
Then Use index to track the element 然后使用索引来跟踪元素
<ng-container *ngFor = "let m of images; let i=index ">
<button (click) = "toggle(m[m.length-1]);Toggle[i] =! Toggles[i] "><img src = {{m[0]}}/></button>
<div id = "toggle" *ngIf = "Toggle[i]" [@toggle] = 'status'>
<ul>
<li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
</ul>
</div>
<br />
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.