1
我有一個函數來更改我的角度組件類中的DOM元素的類名。我得到一個錯誤，Angular2 npm啓動失敗
Property style does not exists on type Element
當試圖建立。該構建存在狀態碼2，然後npm serve不運行。
但是，如果我刪除這個功能，npm開始工作正常，我得到的頁面。然後一旦重新引入代碼，一切正常。
下面是組件代碼
import { Component , AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'fsiapp',
templateUrl: "/templates/dashboard.html"
})
export class FsiMainComponent {
openTab(tabName:any) {
var i;
var x = document.getElementsByClassName("maps");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
var x = document.getElementsByClassName("tab-button");
for (i = 0; i < x.length; i++) {
x[i].className = "tab-button";
}
document.getElementById(tabName+"b").className = "tab-button selected";
}
toggleEdit(){
if(document.getElementById("edit").innerHTML == "Edit") {
document.getElementById("edit").innerHTML = "Save";
document.getElementById("advName").className = "textbox";
document.getElementById("advRate").className = "textbox";
document.getElementById("advAddress").className = "textbox";
document.getElementById("advEmail").className = "textbox";
document.getElementById("advPhone").className = "textbox";
document.getElementById("advFax").className = "textbox";
} else {
document.getElementById("edit").innerHTML = "Edit";
document.getElementById("advName").className = "textboxread";
document.getElementById("advRate").className = "textboxread";
document.getElementById("advAddress").className = "textboxread";
document.getElementById("advEmail").className = "textboxread";
document.getElementById("advPhone").className = "textboxread";
document.getElementById("advFax").className = "textboxread";
}
this.readonly = !this.readonly
}
private readonly:boolean = true;
container: any;
hot: any;
container1: any;
hot1: any;
ngAfterViewInit() {
this.container = document.getElementById('example');
this.container1 = document.getElementById('example1');
this.hot = new Handsontable(this.container, {
data: Handsontable.helper.createSpreadsheetData(7, 3),
cells: function (row:any, col:any, prop:any) {
var cellProperties:any;
cellProperties.readOnly = true;
if (this.instance.getData()[row][col] === 'cell value here') {
// code based on cell value
}
if (row % 2 === 0) {
//changing style based on row number
cellProperties.renderer = function (instance:any, td:any, row:any, col:any, prop:any, value:any, cellProperties:any) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
//td.style.fontWeight = 'bold';
//td.style.color = 'green';
td.style.background = '#F1F1FF';
}
}
return cellProperties;
},
rowHeaders: false,
colHeaders: ["FSI Date","FSI Name","FSI Count"],
// performance tip: set constant size
width: 320,
height: 120,
colWidths: 100,
rowHeights: 5,
columnSorting: true,
sortIndicator: true,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false
});
this.hot1 = new Handsontable(this.container1, {
data: Handsontable.helper.createSpreadsheetData(20, 6),
cells: function (row:any, col:any, prop:any) {
var cellProperties:any;
cellProperties.readOnly = true;
if (this.instance.getData()[row][col] === 'cell value here') {
// code based on cell value
}
if (row % 2 === 0) {
//changing style based on row number
cellProperties.renderer = function (instance:any, td:any, row:any, col:any, prop:any, value:any, cellProperties:any) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
//td.style.fontWeight = 'bold';
//td.style.color = 'green';
td.style.background = '#F1F1FF';
}
}
return cellProperties;
},
rowHeaders: false,
colHeaders: ["FSI Date","Advertiser","FSI Name", "Barcode","Coverage","Track Status"],
// performance tip: set constant size
width: 700,
height: 300,
colWidths: 115,
rowHeights: 5,
columnSorting: true,
sortIndicator: true,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false
});
}
}
下面是構建
> [email protected] build D:\dropbox\Dropbox\angular\fsiapp
> tsc -p src/
src/app/fsi-main.component.ts(15,9): error TS2339: Property 'style' does not exi
st on type 'Element'.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart pa
ckage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\108630\AppData\Roaming\npm-cache\_logs\2017-04-14T18_15_22
_557Z-debug.log
這期間我得到的錯誤是故宮生成日誌
0 info it worked if it ends with ok
1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle angular[email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dropbox\Dropbox\angular\fsiapp\node_modules\.bin;D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dropbox\Dropbox\angular\fsiapp\node_modules\.bin;C:\oraclexe\app\oracle\product\11.2.0\server\bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\SysWOW64\config\systemprofile\AppData\Roaming\npm;C:\Program Files\Java\jdk1.8.0_91\bin;C:\Program Files (x86)\Android\android-sdk;C:\Program Files (x86)\Android\android-sdk\platform-tools;D:\Program Files\nodejs\;C:\Program Files (x86)\WebEx\PTools020000000
10 verbose lifecycle [email protected]~build: CWD: D:\dropbox\Dropbox\angular\fsiapp
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'tsc -p src/' ]
12 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `tsc -p src/`
14 verbose stack Exit status 2
14 verbose stack at EventEmitter.<anonymous> (D:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:194:7)
14 verbose stack at ChildProcess.<anonymous> (D:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:194:7)
14 verbose stack at maybeClose (internal/child_process.js:899:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\dropbox\Dropbox\angular\fsiapp
17 error Windows_NT 6.1.7601
18 error argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v7.9.0
20 error npm v4.2.0
21 error code ELIFECYCLE
22 error errno 2
23 error [email protected] build: `tsc -p src/`
23 error Exit status 2
24 error Failed at the [email protected] build script 'tsc -p src/'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the angular-quickstart package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error tsc -p src/
24 error You can get information on how to open an issue for this project with:
24 error npm bugs angular-quickstart
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls angular-quickstart
24 error There is likely additional logging output above.
25 verbose exit [ 2, true ]
最初它看起來像是從DOM選擇器「maps」返回的東西，是至少有一個沒有屬性「style」的元素的集合。 我會做的第一件事是眼球裏的元素集合，在調試器中設置一個斷點或者追蹤它。 –