Angular2：绑定到模板时呈现为整数的字符串值

Question

考虑下面的Angular2代码：

<li *ngFor='let department of departments' value='{{department.id}}'>{{department.name}} {{department.id}}</li>

当我在浏览器中运行它时，它会呈现以下html（为清晰起见而清理）：

<li value="-1677026285">Dept1 2617941011</li>

请注意，同一个变量department.id在li的文本部分中呈现为实际值2617941011，但在value属性中完全不同（看起来像它试图将该字符串解析为整数。）

有什么办法可以避免吗？

我将添加Department类（其中departments是一个数组）指定id作为强类型属性：

    export class Department {constructor(public name:string = "", public id:string = ""){ }}

提前致谢！

Answer 1

<li value='{{department.id}}'></li>

此代码表示您在li元素上传递值属性。

从此w3schools.com

  

value属性设置或返回value属性的值   列表项。

然后看看这个规范： https://www.w3.org/TR/html5/single-page.html#the-li-element

  

value属性（如果存在）必须是给出的有效整数   列表项的序数值。

应该是从-2147483648到2147483647

的数字

  

如果存在value属性，则用户代理必须parse it作为   整数

因此没有与angular2

相关的内容

改为使用属性绑定：

[attr.value]="department.id"