web-dev-qa-db-ja.com

Angular 2データ属性

何かが足りないような気がします。 dataでattributetemplateを使用しようとすると、次のようになります。

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

Angular 2は次のようにクラッシュします。

例外：テンプレート解析エラー： 'sectionvalue'にバインドすることはできません。これは既知のネイティブプロパティではないためです（ "

] data-sectionvalue = "{{section.value}}"> {{section.text}}

私は明らかに構文に何かが足りない、助けてください。

angularangular2-template
177
Serj Sagan

代わりに属性バインディング構文を使用してください

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

Angular 2に条件付き属性を追加するにはどうすればいいですか？

388
Günter Zöchbauer

アクセスについて

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

そして

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}
19
Max Shmelyov