從* ng中的兄弟元素事件訪問模板引用變量

Question

我在*ngFor的textarea元素上有一個模板引用變量#profiletextedit。

我也有一個(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

看來，這是一個已知的錯誤，與使用一個*ngIf調節元件上的模板參考變量。看看GitHub的問題：

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

因此，你的情況，如果你刪除*ngIf="profile.isEditMode"，預期它會工作。您會在提供的鏈接中找到其他解決方法。

Answer 2

不確定。它應該按預期工作 - 看看這裏
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>