Templace-Referenzvariable ist nicht definiert

Question

Ich habe eine Vorlage-Referenzvariable in einem Eingabefeld namens #newSkill erstellt. In der addToSkill() Methode übergebe ich es als Parameter, und es funktioniert gut.

jedoch in der chooseSkill() Methode, die mit der Klick-Funktion meiner Listeneinträge aufgerufen wird, ist newSkill undefiniert. Warum das? Ich sehe nicht, warum es einen Unterschied zwischen diesen beiden Methoden geben sollte. Es gibt wahrscheinlich einen offensichtlichen Fehler in meinem Code, aber ich kann es nicht erkennen. Jede Hilfe wird geschätzt.

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:

Es scheint, wie die * ngIf auf #newSkill ist das Problem. Wenn ich es entferne, funktioniert es. Irgendeine Idee warum? Macht für mich keinen Sinn. Die Bedingung ist offensichtlich wahr, da ich in die Eingabe schreiben kann. Ich habe auch versucht, den Wert von canEdit() zu drucken, was wahr war.

UPDATE 2:

fand ich eine Abhilfe. Ich habe den * ngIf zu [versteckt] geändert. Ich habe immer noch keine Ahnung warum * ngIf hier nicht funktioniert hat.

Answer 1

Sieht gut aus, das Problem besteht darin, dass Sie die Template-Referenzvariable nicht mit ngModel binden. Versuchen Sie mit folgen und lassen Sie mich wissen, ob es funktioniert. Ich hoffe es tut es.

#newSkill="ngModel" 

dann verwenden Sie es mit * ngIf.