typeError:无法读取未定义的属性'tigerStart'

Question

• 我是打字稿和角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

看起来像具有属性键的对象tigerStart未定义。

你可以这样调试：

• 首先，您应该确保具有属性键的对象tigerStart实际上返回一个对象而不是“未定义”。

示例：假设tiger是一个具有 key 属性的对象tigerStart。

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

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