* 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

Angular將[(x)]語法“解糖”為屬性綁定的x輸入屬性和事件綁定的xChange輸出屬性。 - 參考

因此，如果您為輸入屬性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"
在Child中 - @Input xxx: boolean;
@Output() xxxChange = new EventEmitter <boolean> ();

注意xxxChange屬性。 在你的情況下缺少

現在， 在這里查看代碼 - 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

...
...
}