Question

我在名为#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更改为[hidden]。我仍然不知道为什么* ngIf在这里不起作用。

Answer 1

看起来谎言问题是你没有用ngModel绑定模板引用变量。尝试以下，让我知道它是否有效。我希望如此。

#newSkill="ngModel"

然后将其与* ngIf一起使用。

Templace参考变量未定义

1 个答案: