Bind выбран раскрывающийся вариант переменной

Question

У меня есть ngFor цикл, который выглядит примерно так (упрощенный, так что легче следовать):

<div *ngFor="let c of customers"> 
    <button class="save green-button" type="button" (click)="editCustomer(c.CustomerId, method.value)">Save</button> 

    <select *ngIf="c.GrowMethodsAvailable.length" id="PerProjectGrowMethodId" name="PerProjectGrowMethodId" #method> 
     <option *ngFor="let method of c.GrowMethodsAvailable" [ngValue]="method.Value">{{method.Text}}</option> 
    </select> 
</div> 

Как вы можете видеть, есть кнопка сохранения и выберите выпадающий динамические параметры. Когда я нажимаю кнопку «Сохранить», мне нужно отправить любое значение, которое я выбрал из соответствующего раскрывающегося списка. Я знаю, как привязать значение к переменной, которую я создал в моем классе, но потенциально может быть 10 различных кнопок сохранения с 10 различными значениями, поэтому я предположил, что для каждой выпадающего списка выберите локальную переменную. Я добавил #method к элементу select и добавил method.value к моей функции (click)="editCustomer(c.CustomerId, method.value)" в кнопке сохранения. Когда я попытался это я получил следующее сообщение об ошибке:

Cannot read property 'value' of undefined

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

Answer 1

Проблема с вашими переплетами заключается в том, что повторение #method внутри *ngFor для клиентов разрывает рукоятку двигателя шаблона при выборе. Чтобы изменить его и заставить его работать, нам нужно будет изменить наш подход и переменную шаблона канавки, поскольку они статически определены:

Мы можем злоупотреблять JS здесь ради нас, в вашем компоненте добавить свойство, которое будет отслеживать выбранные элементы :

component.ts

selected = []; 

в шаблоне HTML мы доступ к этой собственности в кнопке и выберите:

<div *ngFor="let c of customers"> 
     <button class="save green-button" type="button" (click)="editCustomer(c.CustomerId, selected[c.CustomerId])">Save</button> 

     <select *ngIf="c.GrowMethodsAvailable.length" [(ngModel)]="selected[c.CustomerId]"> 
      <option *ngFor="let method of c.GrowMethodsAvailable" [ngValue]="method.Value">{{method.Text}}</option> 
     </select> 
    </div> 

Plunker: http://plnkr.co/edit/bWnlJfydPbUxeeI6a715?p=preview