[解決済み】Angularを使用してデータ属性を記述するにはどうすればよいですか？

2022-04-01 12:44:54

質問

何か物足りない気がします。このような場合 data attribute の中で template は、このように。

<ol class="viewer-nav">
    <li *ngFor="#section of sections" data-sectionvalue="{{ section.value }}">
        {{ section.text }}
    </li>
</ol>

Angular 2 でクラッシュします。

EXCEPTION: テンプレートパースエラーです。sectionvalue' にバインドできない。は既知のネイティブプロパティではありません（"
]data-sectionvalue="{{ section.value }}">{{ section.text }} のようになります。

明らかに構文がおかしいのですが、助けてください。

属性バインディング構文で代用する

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    [attr.data-sectionvalue]="section.value">{{ section.text }}</li>  
</ol>

または

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    attr.data-sectionvalue="{{section.value}}">{{ section.text }}</li>  
</ol>