Angularを使用してデータ属性を書き込むにはどうすればよいですか?


229

私が使用しようとするとdata attribute、私の中でtemplateこのように、:

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

構文に明らかに何か欠けています。助けてください。

回答:


471

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

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

また見なさい:


20
データ属性の値にアクセスするにはどうすればよいですか?
Sean W

4
達成しようとしていることを示すコードを含む新しい質問を作成してください。
ギュンターZöchbauer

10
これは、 ''のクエリの既知のプロパティではないため、 ''にバインドできません。このコメントは少し役立つかもしれません...
netzaffin 2017

1
@netzaffinこれは便利な答えですが、バインドできないエラーに何度も遭遇しました。これが初めて実際の問題/解決策でした。
スタックアンダーフロー

32

アクセスについて

<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)
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.