テンプレート参照変数が定義されていません

Question

#newSkillという入力フィールドにテンプレート参照変数を作成しました。 addToSkill()メソッドでは、パラメータとして渡していますが、正常に動作します。

ただし、chooseSkill()のメソッドでは、私のリストアイテムのクリック機能で呼び出されますが、newSkillは未定義です。何故ですか？私はなぜこれらの2つの方法の違いがあるのか​​分かりません。私のコードには明らかな誤りがあるかもしれませんが、私はそれを見つけられません。どんな助けもありがとうございます。

HTML：

<li id="skillInput"> 
    <input *ngIf="canEdit()" #newSkill type="text" class="skillInputField" placeholder="Type your skills here" (keydown.enter)="addToSkill(newSkill)" 
(keyup)="findSkill($event)"> 

    <span *ngIf="canEdit()" class="addBtn" (click)="addToSkill(newSkill)"></span> 
</li> 
<ul> 
    <li #selectedSkill class="skillItem" *ngFor="let skill of skillSearchResult" (click)="chosenSkill(selectedSkill.innerText, newSkill)"> 
     {{skill}} 
    </li> 
</ul> 

TS：

addToSkill(newSkill: HTMLInputElement) { 
console.log(newSkill); 
let value = newSkill.value; 
//Check for being empty, whitespace and duplicate 
if (value && value.trim().length && !this.skillArray.find(x => x.name == value)) { 
    this._userService.addSkill({ userID: parseInt(localStorage.getItem('currentUserId')), name: value, level: "low" }) 
    .subscribe(
    result => { 
     if(result == true){ 
     //success 
     this.skillArray.push({ userID: parseInt(localStorage.getItem('currentUserId')), name: value, level: "low" }); 
     } else { 
     //faliure 
     } 
    }, 
     err => { 
     console.log(err); 
     } 
) 
} 
newSkill.value = ''; 
} 


chooseSkill(selectedSkill: string, newSkill: HTMLInputElement) { 

if (selectedSkill && selectedSkill.trim().length && !this.skillArray.find(x => x.name == selectedSkill)) { 
    console.log(selectedSkill); 

    this._userService.addSkill({ userID: parseInt(localStorage.getItem('currentUserId')), name: selectedSkill, level: "low" }) 
    .subscribe(
    result => { 
     if(result == true){ 
     //success 
     this.skillArray.push({ userID: parseInt(localStorage.getItem('currentUserId')), name: selectedSkill, level: "low" }); 
     //Remove from search result list when clicked 
     this.skillSearchResult.splice(this.skillSearchResult.indexOf(selectedSkill), 1); 
     } else { 
     //faliure 
     } 
    }, 
     err => { 
     console.log(err); 
     } 
) 
} 
// Input field empty 
newSkill.value = ""; 

} 

UPDATE：

それは#newSkillに* ngIfのように思えるが問題です。私はそれを削除すると、それは動作します。どんな考え？私には分かりません。私は入力を書くことができるので、条件は明らかです。私もcanEdit（）の値を表示しようとしましたが、それは本当でした。

更新2：

回避策が見つかりました。 * ngIfを[hidden]に変更しました。私はまだ何故* ngIfがここで働かなかったのかという手がかりがない。

Answer 1

テンプレートリファレンス変数をngModelにバインドしていないという問題があります。フォローしてみて、そのことがわかったら教えてください。私はそれが願っています。

#newSkill="ngModel" 

* ngIfとともに使用します。