kendo-ui-sortables 각도로 이미지 사용하기 2

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

넌 templates 사용

및 필드 데이터 아이템, 예컨대 : 같이 각 영상 소스를 가리키는 오브젝트의 배열

<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'} 

];

EXAMPLE