Angular 2 : Saving variables in ngFor loop for use outside of loop

Question

我有一个由 for 循环生成的品种列表。该列表中的每个项目旁边都有一个按钮，以便可以删除特定的列表项目。每个按钮都会打开一个模式，您可以在其中确认是否要删除该品种。我不希望页面上有无限量的模态，所以我将模态放在 for 循环之外，并希望将 id 从初始删除按钮传递给模态，以便模态知道要删除的品种​​。我想为了做到这一点，我需要创建一个变量。我尝试通过将 #varietyToDelete="{{variety.PerProjectVarietyId}}" 放在初始删除按钮中，然后在模态的最终删除按钮内添加以下代码:(点击)="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}}"

有没有办法让我想做的事情发挥作用？是我的语法不对，还是我需要完全采用不同的方法？

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>