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>

如果该属性不存在。

在离子的html标签中使用未定义的属性

1 个答案: