javascript - 为什么这个字段在 Angular2 中未定义？

Question

我在 Angular2 中有这个模板:

<tr *ngFor="#user of users">
    <td>
        <label *ngIf="editing != user.id">{{ user.name }}</label>
        <input #username *ngIf="editing == user.id" value="{{ user.name }}" />
    </td>
    <td>
        <label *ngIf="editing != user.id">{{ user.lastname }}</label>
        <input #lastname *ngIf="editing == user.id" value="{{ user.lastname }}" />
    </td>
    <td>
        <label *ngIf="editing != user.id">{{ user.gender | genderPipe }}</label>
        <select #gender *ngIf="editing == user.id" value="{{ user.gender }}">
            <option value="0">
                {{ 0 | genderPipe }}
            </option>
            <option value="1">
                {{ 1 | genderPipe }}
            </option>
        </select>
    </td>
    <td>
        <img (click)="removeUser(user.id)" width="16px" class="pull-left" src="/images/close.png" />
        <img (click)="editUser(user.id)" *ngIf="editing != user.id" class="pull-left" src="/images/edit.png" />
        <img (click)="saveUser(user.id, username)" *ngIf="editing == user.id" class="pull-left" src="/images/save.png" />
    </td>

我将 #username 属性设置为第一个输入。在 saveUser() 中，当我发送 username 参数时，它是 undefined。

这是为什么呢？我该如何解决这个问题？

Answer 1

您应该使用 [(ngModel)] 来更新属于它的所有属性的值，而不是使用 {{}} 的 value 属性> 内插值。

标记

<tr *ngFor="#user of users">
    <td>
        <label *ngIf="editing != user.id">{{ user.name }}</label>
        <input *ngIf="editing == user.id" [(ngModel)]="user.name" />
    </td>
    .....
    <td>
        .....
        <img (click)="saveUser(user)" *ngIf="editing == user.id" class="pull-left" src="/images/save.png" />
    </td>