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>

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

＆＃34; exportAs＆＃34;没有指令调成＆＃34; {{variety.PerProjectVarietyId}}＆＃34;

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

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标记，您可能需要将其更改为按钮或其他内容）< / p>

<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>

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

1 个答案: