Angular2中html属性中的字符串从字符串中消失的前导零答案

【问题标题】：Leading zeros disappearing from string in html-attribute in Angular2Angular2中html属性中的字符串从字符串中消失的前导零
【发布时间】：2017-09-11 02:09:24
【问题描述】：

我在将字符串从对象输出到 Angular2 中的 html 属性时遇到一些问题。由于某种原因，前导零在发送到 html 属性时会从字符串中消失，但不会在 DOM 元素的 innerHTML 中消失。

Plunker：https://embed.plnkr.co/yHdtjYs5Mh0aguFoS0Jl/

数据模型：

export class Company{
  name:string;
  orgNr:string;
}

组件

export class App {
  public companies:Array<Company> = [];

  constructor() {
    let c = new Company();
    c.name = "Google";
    c.orgNr = "0000123";
    this.companies.push(c);
  }
}

模板：

<ul>
  <li *ngFor="let company of companies" value="{{company.orgNr}}">
        {{company.name}} - {{company.orgNr}}
  </li>
</ul>

如果 orgNr 设置为“0000123”，这是在 li 元素中显示的值，但在 value 属性中，该值是“123”。

<ul>
  <li value="123">
        Google - 0000123
  </li>
</ul>

不太确定这里发生了什么，但我怀疑它与类型转换有关。这是 Angular 的问题，还是除了总是以非零开头的数字之外，我还能做些什么？

【问题讨论】：

标签： html angular typescript

【解决方案1】：

注意value 必须是整数，并且仅在与ol 一起使用时才有意义，即有序列表。引用 MDN：

价值

这个整数属性表示<ol> 元素定义的列表项的当前序数值。此属性的唯一允许值是数字，即使列表以罗马数字或字母显示也是如此。列表后面的项目从值集中继续编号。 value 属性对于无序列表 (<ul>) 或菜单 (<menu>) 没有任何意义。

似乎 Angular 足够智能，可以将字符串转换为整数。您可以使用在渲染时转换为0 的非数字字符串进行测试。

如果你想存储任何元数据，你可以使用这样的东西作为模板：

<li *ngFor="let company of companies" value="{{company.orgNr}}" 
     attr.data-vl="{{company.orgNr}}">
     {{company.name}} - {{company.orgNr}}
</li>

渲染后如下所示：

<li value="123" data-vl="0000123">
        Google - 0000123
</li>

希望这会有所帮助。

【讨论】：