Question

我想通过单击按钮之一在多个div中仅向下切换一个div

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>

在* ngFor =“让m张图片，m是Array <{string[]>，在索引0处存储图片，在索引1处存储唯一ID。因此我得到该id的功能，toggle（）。在切换时，还有另一个Array <string[]>成员图像，它具有10个从索引0到9的图像，并且在最后一个索引处具有不合法的ID。因此，请比较ID和this.memberimages中的ID，如果相同，然后将selected设置为true，并将匹配的string []从this.memberimages保存到this.clicked并在li标记中使用...。希望解释是可以理解的。...：（

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;
        }       
}

动画

  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'
        })))
    ])
]

div id =“ toggle”的CSS只需显示：none;

我期望的是，如果我单击其中一个按钮（总共5个），则只能在该按钮下向下切换值。但是，实际上发生的是，一旦我单击其中一个按钮，值是正确的，但是每个按钮都一次切换了具有相同值的div，而我看不到任何动画效果如何匹配一个div一个按钮，以使每个按钮具有正确的值并且只能切换div？

PS：为我的英语不好对不起。.：（

Answer 1

尝试

创建新变量

Toggle =[]

然后使用索引来跟踪元素

<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>

使用* ngFor

1 个答案: