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

Question

我有一个由 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>

当我尝试此操作时，出现以下错误：

没有将“exportAs”设置为“{{variety.PerProjectVarietyId}}”的指令

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

Answer 1

您可以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 循环中使用在单击事件上显示模态：（不确定是否可以将单击事件添加到a标记中，您可能必须将其更改为按钮或其他内容）

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

最后，您只需removeVariety(varietyToRemove)调用删除按钮的单击事件：

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