我是angular 2和typescript的新手，我正在尝试为我的弹出窗口调用rocketLaunching函数。
如果我在弹出窗口之外声明它没有调用但是如果我在弹出窗口内移动它会抛出这个错误：
错误TS2304：找不到名称＆＃39; $ event＆＃39;
在下面提供相关代码和错误：
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>
<label class="fileContainer dragAndDropHolder">
{{dragDrop}}
</label>
<label class="fileContainer dragAndDropHolder" >
{{dragDrop}}
<input type="file" id="attachMobileBrowseBtn" [class.disabled]="isDressLocked" (change)="rocketLaunching($event)" />
</label>
<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>
</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>
<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();
}
答案 0 :(得分：1)
Angular文档说$ event包含元素的整个有效负载。 因此对rocketLaunching函数进行以下更改： -
rocketLaunching(event: any) : void {
console.log(event.target)
this.readThis(event.target);
}
在函数定义中使用$ event的任何地方进行相同的更改。
基本上通过这样做，＆＃34;事件＆＃34;参数将接收$ event的整个有效负载。
答案 1 :(得分：0)
根据你的代码（你所展示的），问题在于方法
openPopup(values): void您调用this.rocketLaunching($event)并且未声明$ event。
你试图模拟change event手动调用这个方法，所以或者你做一个重构来制作另一个带有必要代码的方法让你调用它，或者你可以（我真的不建议）伪造一个事件自己创造。
例如：
openPopup(values): void {
var event = new Event('change'); //create the event, not tested
this.rocketLaunching(event);
}
您可以在此处阅读有关创建活动的信息：