我想在 *ngFor
中生成唯一的变量 share
,这样我就可以打开单个模态。
<li *ngFor="let gallery of galleries; let i = index">
<div class="gallery card" >
<div class="share-fab" (click)="share = !share" [class.open]="share">
<div class="option email" [class.open]="share"><i class="material-icons">email</i></div>
<div class="option download" [class.open]="share"><i class="material-icons">file_download</i></div>
<div class="option facebook" [class.open]="share"><i class="material-icons">whatshot</i></div>
<div class="option twitter" [class.open]="share"><i class="material-icons">notifications_none</i></div>
<div class="close" [class.open]="share"><i class="material-icons cross">close</i></div>
</div>
</div>
</div>
</li>
非常感谢任何帮助...
最佳答案
您应该向您的图库对象添加一个属性share
,例如:
export class Gallery {
//...
public share: boolean = false;
}
在您的模板中,您可以执行以下操作:
<li *ngFor="let gallery of galleries; let i = index">
<div class="gallery card" >
<div class="share-fab" (click)="gallery.share = !gallery.share" [class.open]="gallery.share">
<div class="option email" [class.open]="gallery.share"><i class="material-icons">email</i></div>
<div class="option download" [class.open]="gallery.share"><i class="material-icons">file_download</i></div>
<div class="option facebook" [class.open]="gallery.share"><i class="material-icons">whatshot</i></div>
<div class="option twitter" [class.open]="gallery.share"><i class="material-icons">notifications_none</i></div>
<div class="close" [class.open]="gallery.share"><i class="material-icons cross">close</i></div>
</div>
</div>
</div>
</li>
另一个选择是在组件中创建一个变量,您可以在其中跟踪哪些画廊应该处于事件状态。很确定您会自己弄清楚如何做到这一点:)
关于javascript - 在 *ngFor 中为开放模式生成唯一的变量名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41460593/