Angular를 사용하여 데이터 속성을 작성하는 방법

data attribute내에서 를 사용하려고 template하면 다음과 같이하십시오.

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

Angular 2 충돌 :

예외 : 템플릿 구문 분석 오류 : 'sectionvalue'에 알려진 기본 속성이 아니기 때문에 '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>

또한보십시오 :

• Angular 2에서 조건부 속성을 추가하는 방법은 무엇입니까?

액세스에 대해

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