Использование неопределенных атрибутов в HTML-тегах в ионном

Question

Я хочу использовать grid-list для создания хороших плиток в моем ионном приложении.Я генерирую элементы моей сетки следующим образом:

<ion-content padding>

  <div class="grid-container" style="height: 100%; width: 100%;">
    <ul class="container" style="position:relative; height: 100%; width: 100%;">
      <li *ngFor="let item of items "
          class="grid-item"
          style="position:absolute"
          data-x="{{item.x}}"
          data-y="{{item.y}}"
          data-w="{{item.w}}"
          data-h="{{item.h}}">
      </li>
    </ul>
  </div>

</ion-content>

Объект item в моей компоненте:

  items = [
    {w: 1, h: 1, x: 0, y: 0},
    {w: 1, h: 2, x: 0, y: 1},
    {w: 2, h: 2, x: 1, y: 0},
    {w: 1, h: 1, x: 1, y: 2},
    {w: 2, h: 1, x: 2, y: 2},
    {w: 1, h: 1, x: 3, y: 0},
    {w: 1, h: 1, x: 3, y: 1},
    {w: 1, h: 0, x: 4, y: 0}
  ];

Однако это не работает, потому что TypeScript говорит мнечто data-w и т. д. не являются известными свойствами <li>, которые я знаю.Но разве я не смогу добавить их вот так?

Также ни

  [data-x]="item.x"
  [data-y]="item.y"
  [data-w]="item.w"
  [data-h]="item.h"

, ни

  [data-x]="{{item.x}}"
  [data-y]="{{item.y}}"
  [data-w]="{{item.w}}"
  [data-h]="{{item.h}}"

не работают, и я не знаю почему.Та же ошибка.

Template parse errors: Can't bind to 'data-x' since it isn't a known property of 'li'.

Answer 1

Оказывается, вам нужно использовать attr.:

<li [attr.not-existing-property]="something"> </li>

, если свойство не существует.