Як виправити Angular Can't bind to 'data-...' since it isn't a known property of ...

Проблема

Під час компіляції вашого Angular-додатка ви бачите помилку на кшталт цієї:

angular_error_output.txt

✘ [ERROR] NG8002: Can't bind to 'data-sensor' since it isn't a known property of 'div'. [plugin angular-compiler]

    src/app/my-component/my-component.component.html:107:39:
      107 │ ...                <div class="sensor" [data-sensor]="sensor | json">
          ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component NoxecoDepolMeasurementDisplayComponent.

    src/app/my-component/my-component.component.ts:31:17:
      31 │     templateUrl: './my-component.component.html',
         ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] NG8002: Can't bind to 'data-sensor' since it isn't a known property of 'div'. [plugin angular-compiler]

    src/app/my-component/my-component.component.html:107:39:
      107 │ ...                <div class="sensor" [data-sensor]="sensor | json">
          ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component NoxecoDepolMeasurementDisplayComponent.

    src/app/my-component/my-component.component.ts:31:17:
      31 │     templateUrl: './my-component.component.html',
         ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Рішення

Ця помилка виникає, коли ви намагаєтесь прив’язати властивість, про яку Angular не знає.

Це атрибут data-..., тому Angular не повинен знати про нього конкретно. Але щоб уникнути спрацьовування перевірки типів, використовуйте attr.data-sensor:

my-component.component.html

<div class="sensor" [attr.data-sensor]="sensor | json">

<div class="sensor" [attr.data-sensor]="sensor | json">

Таким чином Angular розуміє, що це прив’язка атрибута, а не прив’язка властивості.