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存在，您可以访问特定的函数。