kendo ui angular 发布带有自定义操作的连接列表框

Question

我对来自 Telerik 的 Angular Kendo UI 列表框有疑问。我有 2 个带有工具栏和自定义操作的连接列表框，但是它们表现得很奇怪。 当试图向下移动 1 个项目时，它会将项目向下移动 2 次。 我应该创建 2 个不同的 viewchilds 吗？

请在此处查看我的示例：

https://stackblitz.com/edit/angular-piaaqm

谢谢，

Answer 1

请使用以下代码直接从列表框中提取最新值并触发 post API 调用。

import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { ActionName, ListBoxComponent } from '@progress/kendo-angular-listbox';

@Component({
  selector: 'my-app',
  template: `
  {{data}}
        <kendo-listbox
            #Listbox1
            [data]="data"
            (actionClick)="handleActionClick($event)"
            kendoListBoxDataBinding
            [connectedWith]="Listbox2"
            
        >
        </kendo-listbox>
        {{data1}}
        <kendo-listbox
            #Listbox2
            [data]="data1"
            (actionClick)="handleActionClick($event)"
            [toolbar]="false"
            
        >
        </kendo-listbox>
    `,
  styles: [
    `
        kendo-listbox {
            height: 270px;
            width: 240px;
        }
    `,
  ],
})
export class AppComponent {
  public data: string[] = ['Albania', 'Andorra', 'Armenia'];
  public data1: string[] = ['Belgium', 'Luxembourg', 'France'];

  @ViewChildren(ListBoxComponent)
  private listbox: QueryList<ListBoxComponent>;

  public handleActionClick(event: ActionName): void {
    console.log(this.listbox);
    let data = [],
      data1 = [];
    if (this.listbox && this.listbox.length) {
      this.listbox.forEach((item: ListBoxComponent, index: number) => {
        if (index === 0) {
          data = item.data;
        } else {
          data1 = item.data;
        }
      });
      console.log(data, data1);

      // trigger post call here
    }
  }
}

如果需要，还可以在调用同一函数时使用事件selectionChange ！

分叉堆栈闪电战