Angular 2: сохранение переменных в цикле ngFor для использования вне цикла

У меня есть список разновидностей, сгенерированных циклом for. Рядом с каждым элементом в этом списке есть кнопка, позволяющая удалить этот конкретный элемент списка. Каждая кнопка открывает модальное окно, в котором вы подтверждаете, хотите ли вы удалить этот сорт. Я не хочу, чтобы на странице было неограниченное количество модальных окон, поэтому я помещаю модальное окно за пределы цикла for и хочу передать идентификатор начальной кнопки удаления в модальное, чтобы модальное знало, какой вариант удалить. Я полагаю, что для этого мне нужно создать переменную. Я попытался это сделать, поместив #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}}"

Есть ли способ заставить то, что я пытаюсь сделать, работать? Мой синтаксис отключен или мне нужно использовать совершенно другой подход?


angular ngfor
person Bryan    schedule 21.10.2016    source источник
comment
#varietyToDelete="{{variety.PerProjectVarietyId}}" должно быть #varietyToDelete="variety.PerProjectVarietyId"   -  person micronyks    schedule 21.10.2016
comment
И (click)="removeVariety(#varietyToDelete) должно быть (click)="removeVariety(varietyToDelete), но я не уверен на 100%, что это сработает. Попробуйте и дайте нам знать.   -  person Stefan Svrkota    schedule 21.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать 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>
person Stefan Svrkota    schedule 21.10.2016
comment
this.childModal не существует для типа component.ts появляется ошибка - person srujana; 06.11.2017