2017-04-14 8 views
0

オブジェクトからAngular2のhtml属性に文字列を出力する際に​​問題が発生しています。なんらかの理由で、先頭の0はhtml属性に送信されたときに文字列から消えますが、DOM要素のinnerHTMLでは消えません。Angular2のhtml属性の文字列から先行ゼロが消えます

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); 
    } 
} 

テンプレート:orgNr「は0000に設定されている場合

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

123 "はli要素に表示されている値ですが、value属性の値は" 123 "です。

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

ここでは何が起こっているのか分かりませんが、タイプ変換とは関係があります。それはAngularの問題ですか?または、ゼロ以外の何かで常に数値を始めるよりも私ができることがありますか?

答えて

1

valueは整数である必要があり、olと一緒に使用する場合、つまり順序​​付きリストの場合にのみ意味があることに注意してください。 引用MDN:<ol>要素によって定義されるよう

この整数属性は、リスト項目の現在の順序値を示します。リストにローマ数字またはアルファベットが表示されていても、この属性の唯一の値は数字です。これに続くリスト項目は、値セットからナンバリングを続けます。値属性は、順序付けされていないリスト(<ul>)またはメニュー(<menu>)には意味を持ちません。

の詳細については、これを参照してください。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

は角度が整数に文字列を変換するのに十分なインテリジェントであるようです。レンダリング時に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 - 000
</li> 

・ホープ、このことができます。

関連する問題