模板引用变量未定义

【问题标题】：Templace reference variable is undefined模板引用变量未定义
【发布时间】：2017-05-03 21:59:22
【问题描述】：

我在名为#newSkill 的输入字段上创建了一个模板引用变量。在addToSkill() 方法中，我将它作为参数传递，它工作正常。

但是，在使用我的列表项的 click 函数调用的 chooseSkill() 方法中，newSkill 未定义。这是为什么？我不明白为什么这两种方法之间应该有区别。我的代码中可能有一些明显的错误，但我无法发现它。任何帮助表示赞赏。

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 = "";

}

更新：

#newSkill 上的 *ngIf 似乎是问题所在。当我删除它时，它可以工作。知道为什么吗？对我来说没有任何意义。条件显然是正确的，因为我可以在输入中写入。我还尝试打印 canEdit() 的值，这是真的。

更新 2：

我找到了解决方法。我将 *ngIf 更改为 [隐藏]。我仍然不知道为什么 *ngIf 在这里不起作用。

【问题讨论】：

• html 看起来不正确。你有
• 然后立即启动 ul。应该是
  • aaa
  • bbb