Question

我在#profiletextedit内的textarea元素上有一个模板引用变量*ngFor。

我还有一个(keydown.enter)事件，它成功地将变量传递给组件中的事件处理程序。

我在按钮上也有一个(click)事件，无法将同一个变量传递给同一个事件处理程序。它返回undefined。

有人可以帮我理解为什么吗？

<div *ngFor="let profile of profiles" class="selectable card-block">
    <div class="row">
        <div class="col-xs-11">
            <p *ngIf="!profile.isEditMode">{{profile.text}}</p>
            <textarea *ngIf="profile.isEditMode" class="form-control" #profiletextedit (keydown.enter)="updateProfileText(profiletextedit, profile);false" rows="5">{{profile.text}}</textarea>
        </div>
        <div class="col-xs-1">
            <div class="float-xs-right">
                <button *ngIf="profile.isEditMode" type="button" class="btn btn-success btn-block" (click)="updateProfileText(profiletextedit, profile);">Add</button>
            </div>
        </div>
    </div>
</div>

Answer 1

不确定。它应该按预期工作 - 看这里是https://plnkr.co/edit/6JXdzTgW3tCaH0baaMO4?p=preview。

尝试使用 profiletextedit.value ，如下所示，

<div class="float-xs-right">
                <button *ngIf="profile.isEditMode" type="button" class="btn btn-success btn-block" 
                         (click)="updateProfileText(profiletextedit.value, profile);">
                          Add
                </button>
 </div>

Answer 2

这似乎是一个已知的错误，与在*ngIf条件元素上使用模板引用变量有关。看一下github问题：

https://github.com/angular/angular/issues/6179

因此，在您的情况下，如果您删除*ngIf="profile.isEditMode"，它将按预期工作。您将在提供的链接中找到其他解决方法。

从* ngFor中的兄弟元素事件访问模板引用变量

2 个答案: