我使用的是TypeScript 2和Angular 2。
在论证（idAttr）失去价值后成为NaN。
代码如下：
addRow(event) {
const target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
console.log(idAttr);
this.addItem(+idAttr, "ewewe");
}
addItem(index:number, title:string): void {
let item = new Register10SectionViewModel();
item.SectionTitle = title;
item.SectionId = +index;
item.AssetType = "test";
item.CauseDisposal = null;
item.Num1 = 0;
item.Num2 = 0;
item.Num3 = 0;
item.Num4 = 0;
this.model.Register10Data = [...this.model.Register10Data, item];
}
addRow(event)它是绑定到循环按钮
<button (click)="addRow($event)" style="float: right" id="{{data1.id}}">+</button>
在调试中，我看到idAttr addRow中的addItem有效值，但<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
</style>
<body>
<h1>OTSTP5001</h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 136,
cellSize = 17; // cell size
var percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var color = d3.scale.quantize()
.domain([-.2, 1.2])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
var svg = d3.select("body").selectAll("svg")
.data(d3.range(2016, 2018))
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
svg.append("text")
.attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
.style("text-anchor", "middle")
.text(function(d) { return d; });
var rect = svg.selectAll(".day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize; })
.attr("y", function(d) { return d.getDay() * cellSize; })
.datum(format);
rect.append("title")
.text(function(d) { return d; });
svg.selectAll(".month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("class", "month")
.attr("d", monthPath);
var url="http://142.133.224.196:3000/utilization/"
d3.json(url, function(error, json) {
if (error) throw error;
var data = d3.nest()
.key(function(d) { return d.date; })
.rollup(function(d) { return (d[0].utilizationPercentage)/100; })
.map(json);
rect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day " + color(data[d]); })
.select("title")
.text(function(d) { return d + ": " + percent(data[d]); });
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0),
d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
</script>参数中的有效值为NaN。为什么？我是否将idAttr声明为全局变量？=）