바인딩되지 않는 텍스트 어트리뷰트

이 진단은 Angular의 특수 바인딩 접두사(attr., style., class.)가 있는 어트리뷰트가 바인딩으로 해석되도록 확인합니다.

<div attr.id="my-id"></div>

무엇이 문제인가요?

이 예제에서 attr.id는 일반 어트리뷰트로 해석되어 최종 HTML에 그대로 나타납니다(<div attr.id="my-id"></div>). 개발자가 의도한 동작은 아닐 것입니다. 아마 id 어트리뷰트를 설정하려고 했을 것입니다(<div id="my-id"></div>).

어떻게 해결하나요?

attr., class., style.에 바인딩할 때는 Angular 템플릿 바인딩 문법([])을 사용하세요.

<div [attr.id]="'my-id'"></div>
<div [style.color]="'red'"></div>
<div [class.large]="true"></div>

필수 설정

확장 진단이 발생하려면 strictTemplates를 활성화해야 합니다. textAttributeNotBinding에는 strictTemplates 외의 추가 요구 사항이 없습니다.

이 상황을 피할 수 없다면 어떻게 하나요?

프로젝트의 tsconfig.json 파일을 수정하여 이 진단을 비활성화할 수 있습니다.

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "textAttributeNotBinding": "suppress"
      }
    }
  }
}

자세한 내용은 확장 진단 설정을 참고하세요.