仅使用* ngFor向下切换ng-container中的一个div

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是数组<string[]>并且在索引0处存储图像，并且在索引1处存储唯一ID。所以我得到函数的id，toggle（）。在切换时有另一个数组<string[]>，memberimages，有10个图像，从索引0到9，并且在最后一个索引处有unqiue id。所以将id与this.memberimages中的id进行比较，如果相同，则设置为true，并保存匹配的字符串[ ] from this.memberimages to 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只是display：none;

我期望的是，如果我单击其中一个按钮（总共5个），则应仅在该按钮下切换值。然而，实际发生的是，一旦我点击其中一个按钮，值是正确的，但每个按钮一次切换div具有相同的值，我没有看到任何动画效果我如何匹配一个div一个按钮，以便每个按钮有一个正确的值，只切换div？

PS：为我糟糕的英语道歉...... :(

Answer 1

试试这个

创建新变量

Toggle =[]

然后使用index来跟踪元素

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