Question

我想在任何方式使用图像而不是项目中的数据？

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h6>Items: {{items | json}}</h6>
    </div>
    <div class="container-fluid">
        <kendo-sortable
            [navigatable]="true"
            [animation] = "true"
            [data]="items"
            class="row"
            itemClass="item col-xs-6 col-sm-3"
            activeItemClass="item col-xs-6 col-sm-3 active"
        >
        </kendo-sortable>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['styles.css']
})
export class AppComponent {
  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];
}

喜欢这个？任何方式将它与图像一起使用？

Have a look in this, any way to use image instead of grid of data

Answer 1

您可以使用类似以下代码的标签：

<kendo-grid-column title="picture">
          <ng-template kendoGridDetailTemplate let-dataItem>
              <section *ngIf="dataItem.Thumb">
                <img src="{{dataItem.thumb}}" />
              </section>
            </ng-template>
      </kendo-grid-column>

Answer 2

您可以使用Remove the Java EE and CORBA Modules和一组对象，其中一个字段指向相应的图像源作为数据项，例如：

<kendo-sortable
        [navigatable]="true"
        [animation] = "true"
        [data]="items"
        class="row"
    >
    <ng-template let-item="item">
      <div class="item">
        <img [src]="item.url" [alt]="item.text" width="200" style="pointer-events: none;" />
      </div>
    </ng-template>
    </kendo-sortable>
...
public items: any[] = [
{text: 'Img 1', url: 'https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402__340.jpg'},
{text: 'Img 2', url: 'https://cdn.pixabay.com/photo/2017/09/24/17/19/cow-2782461__340.jpg'}

];

templates

如何在kendo-ui-sortables angular 2中使用图像

2 个答案: