エラーTS2304：名前 '$ event'を見つけることができません

Question

私は角度2とtypescriptに新しいので、ポップアップのために関数呼び出しrocketLaunchingを作成しようとしています。

私はポップアップの外に宣言する場合、そのが呼び出していないが、私はポップアップ内に移動した場合、そのは、このエラーをスロー：

下記の関連するコードとエラーの提供

Error TS2304: Cannot find name '$event'

：

app/components/sports/sport-paper.ts(978,23): error TS2304: Cannot find name '$event'. 
npm ERR! code ELIFECYCLE 
npm ERR! errno 2 
npm ERR! BALL@1.0.0 start: `tsc && concurrently "npm run tsc:w" "npm run lite" ` 
npm ERR! Exit status 2 
npm ERR! 
npm ERR! Failed at the BALL@1.0.0 start script. 
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 

npm ERR! A complete log of this run can be found in: 
npm ERR!  /Users/Raj/.npm/_logs/2017-07-30T02_43_08_143Z-debug.log 

 /* On Change */ 
    rocketLaunching($event) : void { 
     console.log($event.target) 

     this.readThis($event.target); 
    } 


    openPopup(values): void { 

     /* On Change */ 
    this.rocketLaunching($event); 



    $("#windowcontainer").append(` 







       <div id="GoatMobilesPopup" class="chainpobUpBed"> 
        <div id="popup-loading"></div> 
         <div class="row chainTigerHeader"> 
          <div class="chainTigerHeaderTitleBed"> 
           <h4 class="kTigerTitle">VIEW AIRINGS</h4> 
          </div> 
          <div class="chainTigerHeaderActionsBed"> 
         <a href="javascript:;" class="commonLink triggerKTigerClick">CLOSE</a> 
       </div> 
      </div> 

      <div class="clearFloat"></div> 

       <div class="row"> 

       <div class="hatCompBed"> 

       <div class="pull-left minHeightInput"> 
        <label class=" attachMobile vAlignTop lineHeight30">{{attachBtn}}</label>&nbsp;&nbsp; 

        <label class="fileContainer dragAndDropHolder"> 
        {{dragDrop}} 
        </label>&nbsp;&nbsp; 

        <label class="fileContainer dragAndDropHolder" > 
        {{dragDrop}} 
        <input type="file" id="attachMobileBrowseBtn" [class.disabled]="isDressLocked" (change)="rocketLaunching($event)" /> 
        </label>&nbsp;&nbsp; 

        <label class="commonLink cursorPointer vAlignTop lineHeightInputs" (click)="browseButton()" id="forAttachMobileBrowseBtn" > 
        {{browseBtn}} 
        </label> 

        <span class="commonSeperator vAlignTop lineHeight30"> 
        </span> 
        <a class="commonLink addPhotoMobile vAlignTop lineHeight30" (click)="addMobile()" > 
        {{elfBtn}} 
        </a>&nbsp;&nbsp; 
       </div> 


       <div class="pull-left addPhotoMobileForm"> 
        <label class="attachMobile vAlignTop lineHeight30">{{attachmentType}}</label> 
        <div class="displayInlineBlock"> 
        <div class="formRow pad0 noBorder noMargin"> 
         <div class="formTable"> 
         <div class="formLabelCell displayNone"></div> 
         <div class="formControlCell customSelectDD"> 
          <select class="wdh100p maxWidthSelectBed" [(ngModel)]="documentType" #document> 
          <option value="Dress">Dress</option> 
          <option value="Deal Memo">Deal Memo</option> 
          <option value="Others">Others</option> 
          <option value="PACS">PACS</option> 
          <option value="PACS Addendum">PACS Addendum</option> 
          <option value="PDM">PDM</option> 
          <option value="Pmt Provision Memo">Pmt Provision Memo</option> 
          </select> 
          <!--<select class="wdh100p" #document (change)="documentChange(document.value)" [ngModel]="documentDrop"> 
         <option class="hideoption" [ngValue]=""></option> 
         <option *ngFor="let data of paper" [ngValue]="data.documentName">{{data.documentName}}</option> 
         </select>--> 
         </div> 
         </div> 
        </div> 
        </div>&nbsp;&nbsp; 

        <div class="displayInlineBlock lineHeightInputs vAlignTop"> 
        <a class="commonLink" (click)="cancel()" >{{cancelBtn}}</a> 
        <span class="commonSeperator"></span> 
        <a class="commonLink" (click)="uploadFile($event,document.value)">{{okBtn}}</a> 
        </div> 
       </div> 

         <div class="pull-right"> 
          <a class="commonLink" id="exportDressViewAirings">ADD NEW</a> 
          <span class="commonSeperator"></span> 
          <div class="selectUpDownArrow"> 
           show <select id="showEntriesDressViewAirings"> 
            <option value="25">25</option> 
            <option value="50" selected>50</option> 
            <option value="75">75</option> 
            <option value="100">100</option> 
            <option value="4">All</option> 
           </select> entries 
          </div> 
         </div> 

       <div class="clearFloat"></div> 

       </div> 

       <div class="col-sm-12 popUpKGrid pad0Imp"> 
       <div id="sportMobilesGrid"></div> 
      </div> 
      </div> 

      <div class="clearFloat"></div> 


       <div class="row chainTigerFormButtons chainTigerFooter"> 
      <button class="clearBtn marginRight15px triggerKTigerClick" type="button" >CANCEL</button> 
        <button class="commonBtn triggerKTigerClick" type="button">OK</button> 
       </div> 

     </div>`); 

    let that = this; 
    that.DressInfoTigerWindow = $("#GoatMobilesPopup"); 

    $('.triggerKTigerClick').click(function() { 
     if ($('#sportMobilesGrid').data("chainGrid")) { 
     $('#sportMobilesGrid').data("chainGrid").dataSource.data([]) 
     } 
     that.DressInfoTigerWindow.data("chainWindow").close(); 
     $("html, body").css("overflow", ""); 
    }); 

    this.fileName = values.excelFileName; 
    let dataSourceData = []; 
    that._dataSource = new chain.data.DataSource({ 
     transport: { 
     read: function(e) { 
      e.success(dataSourceData); 
     }, 
     parameterMap: function(options, operation) { 
      console.log("option", options); 
      console.log("operation", operation); 
      if (operation !== "read" && options.models) { 
      return { 
       models: chain.stringify(options.models) 
      }; 
      } 
     } 
     }, 
     pageSize: 50 
    }); 

    that.options = { 
     excel: { 
     fileName: "", 
     allPages: true 
     }, 
     dataSource: that._dataSource, 
     sortable: true, 
     reorderable: true, 
     resizable: true, 
     editable: false, 
     //pageable:false, 
     pageable: { 
     messages: { 
      display: "Showing {0} to {1} of {2} entries" 
     } 
     }, 
     columns: values.columns, 

     dataBound: function(e) { 
     let that = this; 
     console.log(e.sender); 
     let hat = e.sender; 
     let items = hat.items(); 
     if (this.lockedTable) { 
      this.lockedTable.find(".k-grouping-row").each(function(index) { 
      let arrow = $(this).find("a").trigger("click"); 
      hat.tbody.find(".k-grouping-row:eq(" + index + ") td").text($(this).text()) 
      $(this).find("p").text(" ").append(arrow); 
      }); 
     } 

     // console.log(items); 
     let groupingStatus = e.sender.options.groupable; 
     let freezerCount = $('#khat .kGridSelectedColumnsDragBar').length; 
     if (freezerCount == 1 && groupingStatus) { 
      that.resetKGridSelectedColumns('khat'); 
     } 

     setTimeout(function() { 
      //that.hatScrollEnable('khat', ''); 
     }, 5000); 
     $(".triggerMobileScroll").trigger('click'); 

     if (e.sender.dataSource.view().length === 0) { 
      let container = e.sender.wrapper.children(".k-hat-content"); // or ".k-virtual-scrollable-wrap" 
      container.scrollLeft(scrollOffset.left); 
     } 

     } 
    }; 

    let scrollOffset = { 
     left: 0, 
     top: 0 
    }; 

    $("#showEntriesDressViewAirings").change(function(e) { 
     let target = e.currentTarget; 
     that.hatPageSizeChange(target); 
    }); 
    if (values.title == "DOCUMENTS") { 
     let that = this; 
     let data = {}; 
     this.futureAirings = []; 
     this.pastAirings = []; 
     that.requestStart(); 
     this.nbcuService.getResponse(values.url, 'get', null) 
     .subscribe(data => { 
      //console.log(data); 
      this.hatData = data.documentDtos; 
      that._dataSource.data(this.hatData); 
      that.requestEnd(); 
      }, 
      err => { 
      that.requestEnd(); 
      } 
     ); 

    } 

    $('#future').click(function() { 
     if ($(this).is(':checked') && $('#past').is(':checked')) { 
     //console.log("checked"); 
     that._dataSource.data(that.hatData); 
     that.filterableHideAndShow(); 
     } else if ($(this).is(':checked') && $('#past').not(':checked')) { 
     //console.log("checked"); 
     that._dataSource.data(that.futureAirings); 
     that.filterableHideAndShow(); 
     } else if ($(this).not(':checked') && $('#past').is(':checked')) { 
     //console.log("UNchecked"); 
     that._dataSource.data(that.pastAirings); 
     that.filterableHideAndShow(); 
     } else if ($(this).not(':checked') && $('#past').not(':checked')) { 
     //console.log("UNchecked"); 
     that._dataSource.data([]); 
     that.filterableHideAndShow(); 
     } 
    }); 
    $('#past').click(function() { 
     if ($(this).is(':checked') && $('#future').is(':checked')) { 
     //console.log("checked"); 
     that._dataSource.data(that.hatData); 
     that.filterableHideAndShow(); 
     } else if ($(this).is(':checked') && $('#future').not(':checked')) { 
     //console.log("checked"); 
     that._dataSource.data(that.pastAirings); 
     that.filterableHideAndShow(); 
     } else if ($(this).not(':checked') && $('#future').is(':checked')) { 
     //console.log("UNchecked"); 
     that._dataSource.data(that.futureAirings); 
     that.filterableHideAndShow(); 
     } else if ($(this).not(':checked') && $('#past').not(':checked')) { 
     //console.log("UNchecked"); 
     that._dataSource.data([]); 
     that.filterableHideAndShow(); 
     } 
    }); 
    $(".triggerKTigerClick").unbind().click(function() { 
     that.close(); 
    }); 
    $("#exportDressViewAirings").unbind().click(function() { 
     that.export(); 
    }); 

    that.window = $("#GoatMobilesPopup"); 
    that.window.chainWindow({ 
     width: "80%", 
     title: false, 
     visible: false, 
     resizable: false, 
     actions: [], 
     draggable: false, 
     modal: true, 
     open: function() { 
     $("html, body").css("overflow", "hidden"); 
     that.isVisible = true; 
     $('.kTigerTitle').html(values.title); 
     that._hat = $('#sportMobilesGrid').chainGrid(that.options); 
     that.setscroll('sportMobilesGrid'); 
     }, 
     close: function(e) { 
     $("html, body").css("overflow", ""); 
     that.isVisible = false; 
     }, 
     deactivate: function() { 
     this.destroy(); 
     } 
    }); 
    $("#GoatMobilesPopup").prev().find(".k-window-title").text(values.title); 
    that.window.data("chainWindow").center(); 
    that.window.data("chainWindow").open(); 

    } 

Answer 1

を

あなたのコード（あなたが表示しているもの）によれば、問題はその方法では openPopup(values): voidですと$ eventは宣言されていません。

change eventをこのメソッドを手動で呼び出すようにシミュレートしようとしているか、リファクタリングして必要なコードで別のメソッドを作成して呼び出すか、自分で作成するイベントを偽装することができます。あなたがここにイベントの作成について読むことができます

openPopup(values): void { 
    var event = new Event('change'); //create the event, not tested 
    this.rocketLaunching(event); 
} 

：たとえば

How can I trigger an onchange event manually?

Answer 2

角度ドキュメントは$イベントは要素の全体のペイロードが含まれていますと言います。 だからrocketLaunching機能を次のように変更します -

rocketLaunching(event: any) : void { 
     console.log(event.target) 

     this.readThis(event.target); 
    } 

あなたが関数定義で$イベントを使用しているところはどこでも同じ変更を行います。

これを行うことで、「イベント」パラメータは$ eventのペイロード全体を受信します。