Angular2 嵌套 *ngIf 和 *ngFor 為迭代輸入字段填充相同的值

Question

我在 Angularjs 中有舊模板，如下所示：

    <div class="col col-50" align="left" ng-if="enterTextViewRight"> <!-- enterTextViewRight -->  
        <div ng-repeat="item in randomWord_pair" id="list_two">
            <div style="border:1px dotted gray; border-radius:5px; padding:10px; font-size:15px;height:50px;">
                <input style="margin:0px;" placeholder="Type here" ng-model="pair" type="text" ng-change="rightPartnerCheck(pair,item.word)" />
                <span style="float:right; margin-top: -30px;" ng-show="showPartner[pair]" align="right"><i class="ion-checkmark myCheckmark"></i></span>
            </div>
        </div>
    </div>

我將其更改為 Angular2，如下所示：

<div class="col col-50" align="left" *ngIf="enterTextViewRight"> <!-- enterTextViewRight -->
    <template ngFor [ngForOf]="randomWord_pair" let-item>  
        <div id="list_two">
            <div style="border:1px dotted gray; border-radius:5px; padding:10px; font-size:15px;height:50px;">
                <input style="margin:0px;" placeholder="Type here" [(ngModel)]="pair" type="text" (ngModelChange)="rightPartnerCheck(pair,item.word)" />
                <span style="float:right; margin-top: -30px;" *ngIf="showPartner[pair]" align="right"><ion-icon name="checkmark"></ion-icon></span>
            </div>
        </div>
    </template>
</div>

但是，當我開始在第一個輸入框中鍵入時，所有三個（即根據數組中的元素數）都填充了相同的值。

我究竟做錯了什么？

更新：我也嘗試了以下但同樣的問題：

    <div class="col col-50" align="left" *ngIf="enterTextViewRight"> <!-- enterTextViewRight -->
        <ng-container>  
            <div *ngFor="let item of randomWord_pair" id="list_two">
                <div style="border:1px dotted gray; border-radius:5px; padding:10px; font-size:15px;height:50px;">
                    <input style="margin:0px;" placeholder="Type here" [(ngModel)]="pair" type="text" (ngModelChange)="rightPartnerCheck(pair,item.word)" />
                    <span style="float:right; margin-top: -30px;" *ngIf="showPartner[pair]" align="right"><ion-icon name="checkmark"></ion-icon></span>
                </div>
            </div>
        </ng-container>
    </div>
</div> 

更新：一些附加信息：

randomWord_pair: any;
/* Word pairs those will be presented to the user */
word_pair = [

{'word':'Angst', 'pair':'Butter'},
{'word':'Ball', 'pair':'Faden'},
{'word':'Fluss', 'pair':'Geld'},
{'word':'Kissen', 'pair':'Messe'},
{'word':'Glas', 'pair':'Hals'},
{'word':'Berg', 'pair':'Dose'},
{'word':'Kuchen', 'pair':'Messer'},
{'word':'Ferien', 'pair':'Herz'},
{'word':'Nacht', 'pair':'Pilz'},
{'word':'Rahmen', 'pair':'Sache'},
{'word':'Tür', 'pair':'Sonne'},
{'word':'Scheibe', 'pair':'Wort'}

]

randomWord_pair[] 包含其中一些元素

rightPartnerCheck(p,i_p){
    console.log("right partner check")
    console.log(p + " " + i_p)

    if(this.rightPartnerCheckList[i_p] == p){
        this.showPartner[p] = true;
        if(this.enteredSequence.indexOf(p)==-1){
            this.enteredSequence.push(p)
            console.log(this.enteredSequence)
            console.log("Entered sequence: ")
            console.log(this.enteredSequence)
        }
    }
}

UPDATE3原始代碼的屏幕截圖（所有輸入框都顯示相同的值，但是即使在每個框中輸入的文本也在所需的數組中輸入）

Answer 1

一種解決方法是使用$event並捕獲輸入字段的值：

<input type="text" (keyup)="rightPartnerCheck($event, item.word)" />

和 TS：

rightPartnerCheck(event, word) {
  console.log(event.target.value, word);
}