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);
}

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

1 个答案: