Templace參考變量未定義

我在名爲#newSkill的輸入字段上創建了模板參考變量。在addToSkill()方法中，我將它作爲參數傳遞，並且它工作正常。Templace參考變量未定義

但是，在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 = ""; 

}

UPDATE：

好像在#newSkill的* ngIf的問題。當我刪除它，它的作品。任何想法爲什麼？對我沒有任何意義。條件顯然是真的，因爲我可以在輸入中寫入。我也嘗試打印canEdit（）的值，這是真的。

UPDATE 2：

我找到了解決方法。我將* ngIf更改爲[隱藏]。我仍然不知道爲什麼* ngIf在這裏不工作。

來源

2017-05-03 Jesper

html看起來不正確。你有

然後立即開始ul。它應該是

–

看來問題是你沒有綁定模板引用變量與ngModel。試着跟隨，讓我知道它的作品。我希望它。

#newSkill="ngModel"

然後將它與* ngIf一起使用。

來源

2017-05-04 05:14:55

Templace參考變量未定義

回答

相關問題