typeError：無法讀取undefined屬性'tigerStart'

Question

• 我是新來的typescript和angular js。
• 我試圖在我的代碼中包含另一個組件代碼。
• 這是baby.js代碼到我的代碼
• 但我得到一個錯誤。 TypeError：無法讀取未定義的屬性'tigerStart'
• 可以告訴我如何解決它。
• 提供下面

TypeError: Cannot read property 'tigerStart' of undefined 
    at init.open (pen-pencil.ts:1270) 
    at init.trigger (kendo.all.min.js:25) 
    at init.open (kendo.all.min.js:45) 
    at Penguin.openPopup (pen-pencil.ts:1286) 
    at penguin.pencilClicked (headset.ts:689) 
    at _View_penguin4._handle_click_45_0 (penguin.ngfactory.js:4087) 
    at eval (core.umd.js:9698) 
    at eval (platform-browser.umd.js:1877) 
    at eval (platform-browser.umd.js:1990) 
    at ZoneDelegate.invoke (zone.js:203) 

我的代碼包括tigerStart方法成整體js代碼

@ViewChild（體育）公共天空：運動;

that.window = $("#PenguinPopup"); 
that.window.kendoWindow({ 
    width: "60%", 
    title: false, 
    visible: false, 
    resizable: false, 
    actions: [], 
    draggable: false, 
    modal: true, 
    open: function() { 
    $("html, body").css("overflow", "hidden"); 
    that.isVisible = true; 
    $('.kPopUpTitle').html(values.title); 
    this.sky.tigerStart(); 

包括魚類組件到我的HTML

<div class="clearFloat"></div> 
<ul class="kendu-custom-contextmenu" id="context-menuFinancialSearch"> 
    <li class="kPopUpBtnTriple">View Details</li> 
    <li class="kPopUpBtnTriple">Manage Documents</li> 
</ul> 

<financeLeftSlider (savedSearchData)='getSaveEvent($event)'></financeLeftSlider> 

<Fish></Fish> 
<Penguin (documentCount)='getDocumentEvent($event)'></Penguin> 
<sports></sports> 

<div class="searchNameRequiredPopup"> 
    <div class="pipepobUpBox pipeWindow kPopupConfirmationBox"> 
    <div class="row pipePopUpGridCollection pipePopUpContent lineHeightInputs"> 
     <div class="pipeContent">Please enter the search name.</div> 
    </div> 
    <div class="clearFloat"></div> 
    <div class="row pipePopUpFooter textAligncenterImp"> 
     <!-- <button class="commonBtn" type="button" id ="deleteDocumentYes">Yes</button> --> 
     <button class="clearBtn" type="button" id="searchNameRequiredBtn">Ok</button> 
    </div> 
    <div class="clearFloat"></div> 
    </div> 
</div> 

baby.html

<div id="baby"></div> 
<div id="baby1"></div> 

baby.js

@Component({ 
    moduleId: module.id, 
    selector: 'sports', 
    templateUrl: 'sports.html' 
}) 

export class Star { 

    tigerStart(): void { 
    kendo.ui.sky($("#baby"), true); 
    } 
    tigerEnd(): void { 
    kendo.ui.sky($("#baby"), false); 

    } 

    tigerStart1(): void { 
    kendo.ui.sky($("#baby1"), true); 
    } 
    tigerEnd1(): void { 
    kendo.ui.sky($("#baby1"), false); 
    } 

} 

• 當我打印這張圖時，我沒有看到天空，所以我閱讀了中型表格，並試圖用胖箭頭進行綁定，但仍然無法完成它。
• 在視圖中，我正在使用運動的孩子
• 你能告訴我如何解決它。
• 以便爲今後這將有助於

https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a

@ViewChild(sports) public sky: sports; 
**- tried with fat arrow** 
open:() => { 

**- tried with bind** 
     this.sky.tigerStart().bind(this); 

Answer 1

Looking like an object having property key tigerStart is undefined.

可以調試像這樣：

• 首先，你應該確保一個具有屬性對象鍵tigerStart實際返回的對象，而不是「未定義」。

實施例：假設tiger是與關鍵tigerStart一個具有屬性的對象。

{ 
    "tiger": { 
    "tigerStart": true 
    } 
} 

if (typeof tiger != 'undefined') { 
    /* Your code comes here */ 
} 

Answer 2

在這一行：

this.sky.tigerStart(); 

你希望this.sky被設置的東西，但不是。那是因爲this不是你認爲的那樣;您不在範圍內您認爲自己所在的位置。在此行之前添加console.dir(this)，刷新頁面並檢查瀏覽器控制檯是否想查看this是什麼。然後找出其他方法來解決你真正需要的對象。

Mozilla Developer Network reference article for "this"

嘗試以下操作：

// *** Assign this to a variable (self) 
var self = this; 

that.window = $("#PenguinPopup"); 
that.window.kendoWindow({ 
    width: "60%", 
    title: false, 
    visible: false, 
    resizable: false, 
    actions: [], 
    draggable: false, 
    modal: true, 
    open: function() { 
    $("html, body").css("overflow", "hidden"); 
    that.isVisible = true; 
    $('.kPopUpTitle').html(values.title); 

// *** use the self variable instead of this 
    self.sky.tigerStart(); 

您在您的評論提到的文章是正確的，但如果你真的不明白什麼是在代碼中正在發生的事情，它只會混淆你更多，如果你嘗試做它建議的。您可能想了解更多關於變量作用域在Javascript中的工作方式。一開始有點令人困惑，但理解會幫助你更好地使用Javascript。我自己仍然有問題，但我在這裏展示的方式很容易理解。只要記住當你聲明一個變量並且你在同一級別（或在這些函數內部）聲明瞭函數時，你可以從這些函數內部訪問該變量（除非你在這些函數中創建了具有相同名稱的新變量）。

Answer 3

可能會定義天空，但在訪問它之前，您並未指定它的值。你在哪裏分配一個價值的天空？

目前還不清楚您是指您使用的是Angular還是您的意思是您使用的是AngularJS。在您使用Angular標籤的標籤中。在描述中你提到了AngularJS。這是兩件不同的事情。你也使用$，我假設它是jQuery。我建議避免將jQuery與Angular或AngularJS混合使用。它會讓你的學習過程變得更簡單。

Answer 4

this關鍵字是指當前上下文。在這種情況下，這是您要調用open()的對象的上下文。

that.window = $("#PenguinPopup"); 
that.window.kendoWindow({ 
    width: "60%", 
    title: false, 
    visible: false, 
    resizable: false, 
    actions: [], 
    draggable: false, 
    modal: true, 
    open: function() { 
    $("html, body").css("overflow", "hidden"); 
    that.isVisible = true; 
    $('.kPopUpTitle').html(values.title); 
    this.sky.tigerStart(); 

正如你所看到的，當前的上下文是被輸入到that.window.kendoWindow()的對象。爲了您定的代碼工作，那就需要看起來像這樣：

that.window = $("#PenguinPopup"); 
that.window.kendoWindow({ 
    width: "60%", 
    title: false, 
    visible: false, 
    resizable: false, 
    actions: [], 
    draggable: false, 
    modal: true, 
    sky: { 
    tigerStart: function() { 
     // Do something here... 
    } 
    }, 
    open: function() { 
    $("html, body").css("overflow", "hidden"); 
    that.isVisible = true; 
    $('.kPopUpTitle').html(values.title); 
    this.sky.tigerStart(); 

現在this.sky存在，您可以訪問特定的函數。