Двусторонняя привязка данных в * ngFor

Question

Я создал компонент, который должен быть коммутатором. Вы использовали бы его так же, как и флажок. Это урезанная версия.

мои-switch.component.ts:

import {Component, Input, Output, EventEmitter} from '@angular/core'; 

@Component({ 
    selector: 'my-switch', 
    template: `<a (click)='toggle()'> 
        <span *ngIf='value'>{{onText}}</span> 
        <span *ngIf='!value'>{{offText}}</span> 
        </a>` 
}) 
export class MySwitchComponent { 
    @Input() onText: string = 'On'; 
    @Input() offText: string = 'Off'; 
    @Input() value: boolean; 

    @Output() change = new EventEmitter <boolean>(); 

    position: string; 

    toggle() { 
     this.value = !this.value; 
     this.change.emit(this.value); 
    } 
} 

Мой план, чтобы использовать его как это:

родитель-component.ts

import {Component} from '@angular/core'; 
import {MySwitchComponent} from 'my-switch.component'; 

@Component({ 
    selector: 'my-sites', 
    directives: [MySwitchComponent] 
    template: `<table> 
       <tr *ngFor='let item of items'> 
        <td> 
        <my-switch 
         [(value)]='item.options.option1' 
         (change)='logItem(item)'> 
        </my-switch> 
        </td> 
       </tr> 
       </table>` 
}) 
export class MySitesComponent { 
    items: Object[] = [ 
     {options: { option1: false }} 
    ]; 

    logItem(item) { 
     console.log(item) 
    } 
} 

Опять же, это упрощается, но я думаю, что иллюстрирует то, что я ожидаю. Мое ожидание заключается в том, что при щелчке переключателя, просмотр обновляется с «Выкл.» До «Вкл.», И значение параметра записывается в журнал. Проблема заключается в том, что значение, которое записывается выглядит следующим образом:

{options: {option1: false}} 

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

Answer 1

Угловые «де-сахара» The [(x)] синтаксиса в x ввода недвижимости для связывания собственности и xChange выходное свойство для связывания событий. - reference

Поэтому, если имя вашего ввода свойства value, вы должны назвать свой выходной свойство valueChange:

@Output() valueChange = new EventEmitter <boolean>(); 

Это единственная часть головоломки вы пропали без вести. Теперь у вас есть двусторонняя привязка данных между родительским и дочерним компонентами.

Если вы хотите выполнить некоторую логику, когда ребенок изменяет/emit() S значение, поймать (valueChange) событие в родительском компоненте:

(valueChange)='logItem(item)'> 

Plunker

---

Я также предлагаю

console.log(JSON.stringify(item)) 

Answer 2

В родительском детском сценарии вы можете воспользоваться двухсторонним связывания с xxxChange Output property, как показано ниже,,
В Родитель - [(xxx)]="someValue"
В ребенке - @Input xxx: boolean;
@Output() xxxChange = new EventEmitter <boolean>();

Обратите внимание, что xxxChange свойства.который отсутствует в вашем случае

Теперь Look here for the code- Plunker

<td> From Parent - {{item.options.option1}} <--------------------value will keep changing 
        <my-switch 
         [(value)]='item.options.option1'> <---------two way binding 
        </my-switch> 
</td> 

Здесь следует отметить, [()] представляет два способа связывания так в родителей вам не нужно использовать (valueChange)="someValue=$event", чтобы поймать изменения. [(value)]='item.options.option1' автоматически привяжет новое или измененное значение к item.options.option1.

---

export class MySwitchComponent { 

    @Input() value: boolean; 
    @Output() valueChange = new EventEmitter <boolean>(); <----xxxChange output property 

... 
... 
}