Question

我有一些问题从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的一个问题，还是我还能做些什么，而不是总是以零以外的方式开始一个数字呢？

Answer 1

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

值

此整数属性指示由<ol>元素定义的列表项的当前序数值。即使列表显示为罗马数字或字母，此属性的唯一允许值也是数字。列出此项后面的项目将继续从值集编号。 value属性对无序列表（<ul>）或菜单（<menu>）没有意义。

有关详情，请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

似乎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>

希望这有帮助。

Angular2

1 个答案: