Angular 使用*ngFor从ng容器中仅向下切换一个div

我想通过点击其中一个按钮，在多个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>

动画

  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”只是显示：无

我所期望的是，如果我单击其中一个按钮（总共5个），那么应该只在该按钮下向下切换值。然而，实际发生的情况是，一旦我单击其中一个按钮，值是正确的，但每个按钮一次用相同的值切换div，我看不到任何动画效果 如何匹配一个div和一个按钮，使每个按钮都有一个正确的值，并且只切换div

PS：为我糟糕的英语道歉（

试试这个

创建新变量

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>

<代码>请考虑创建一个STACKBLITZ项目。哦，你是说演示吗？我很抱歉我对StAdvoad是新的。你能告诉我如何吗？（请点击这个链接。它会为你拨出一个启动角度项目。你可以在上面做你的修改并在这里分享：你能解释一下你的逻辑吗？）（因为您使用的是数据数组，所以没有单个元素的轨迹，所以如果您使用空数组并用id标识每个元素，则可以切换单个元素而不是所有元素。）
<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>