Angular 2：在ngFor循环中保存变量以便在循环外使用

发布时间：2020-12-17 17:00:57 所属栏目：安全来源：网络整理

导读：我有一个由for循环生成的变种列表.该列表中的每个项目旁边都有一个按钮,以便可以删除特定的列表项.每个按钮都会打开一个模态,您可以在其中确认是否要删除该变种.我不想在页面上有无限量的模态,所以我将模态放在for循环之外,并希望将id从初始删除按钮传递给模

我有一个由for循环生成的变种列表.该列表中的每个项目旁边都有一个按钮,以便可以删除特定的列表项.每个按钮都会打开一个模态,您可以在其中确认是否要删除该变种.我不想在页面上有无限量的模态,所以我将模态放在for循环之外,并希望将id从初始删除按钮传递给模态,以便模态知道要删除的变体.我认为为了做到这一点,我需要创建一个变量.我通过在初始删除按钮中放置#varietyToDelete =“{{variety.PerProjectVarietyId}}”来尝试这个,然后在模态中的最终删除按钮内,我添加了这个:( click)=“removeVariety(#varietyToDelete)”

为了更好地查看我的代码,这里是我拥有的for循环的相关部分：

<div *ngFor="let variety of varieties; let i=index">
    ...
    <div class="varietyName">            
            <a href="#deleteVarietySelling" #varietyToDelete="{{variety.PerProjectVarietyId}}" data-toggle="modal">
                <i class="fa fa-minus"></i>
            </a>
        </div>
    </div>
</div>

这是我的模态,我想将该变量传递给：

<div class="modal fade alert" id="deleteVarietySelling" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <a href="#" class="close-modal" data-dismiss="modal">&times;</a>
                <p class="confirmation-message">
                    Are you sure you want to delete this variety?
                </p>
                <div class="row">
                    <div class="removeCancel">
                        <a href="#" class="cancel-button" data-dismiss="modal">Cancel</a>
                        <a href="#" class="remove-button" (click)="removeVariety(#varietyToDelete)">Remove</a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当我尝试这个时,我收到以下错误：

There is no directive with “exportAs” set to
“{{variety.PerProjectVarietyId}}”

有没有办法得到我想要做的工作？我的语法是关闭的,还是我需要完全采用不同的方法？

解决方法

您可以在组件中使用ViewChild来读取组件中的模态：

import { ViewChild } from '@angular/core';

@ViewChild('myModal')
myModal: any;

你的模态应该如下所示：

<div bsModal #myModal="bs-modal" class="modal fade alert" id="deleteVarietySelling" tabindex="-1">
    ...
</div>

然后,在组件中,您可以创建一个方法,在单击时显示模态并传递您单击的值,以便将其存储在变量中,然后将该变量传递给removeVariety()：

varietyToRemove: any;

public showModal(variety: any): void {
    this.childModal.show();
    this.varietyToRemove = variety;
}

然后使用showModal(variety：any)在for循环中显示单击事件上的模态:(不确定是否可以将click事件添加到标记,您可能必须将其更改为按钮或其他内容)

<a href="#deleteVarietySelling" (click)="showModal(variety)">
    <i class="fa fa-minus"></i>
</a>

最后,您只需在删除按钮的click事件上调用removeVariety(varietyToRemove)：

<a href="#" class="remove-button" (click)="removeVariety(varietyToRemove)">Remove</a>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!