Question

我有从DB加载的方框列表。我正在尝试制作一个按data-order订购方框的订购功能，当用户点击按钮时应触发它。

组件

 import { JQ_TOKEN} from "../../_service/index";
 constructor( @Inject(JQ_TOKEN) private $: any ) {}

订单功能

orderGames() {
    var boxList = this.$('.box');
    var container = this.$('.box-list-container');
    boxList.sort(function (a: any, b: any) {
        return this.$(a).data("order") - this.$(b).data("order");
    });
    container.html(boxList);
}

接下来我收到以下错误：

EXCEPTION：app / dark-navbar.component.html：44：24错误导致：无法读取属性＆＃39; $＆＃39;未定义的

我怎样才能让它发挥作用？

Answer 1

你不应该需要this。以下是我如何将jQuery与Angular结合使用：

declare var $: any;

@Component({
  selector: 'some-thing',
  templateUrl: './template.html'
})

export class ApplicationComponent implements AfterViewInit {
  public results: String[] = [];

  public ngAfterViewInit() {
    $('#offcanvas').click(() => $('.row-offcanvas').toggleClass('active'));
  }
}

Answer 2

实际上我之前没有使用过角度曲线..但是作为一个jquery函数你可以使用像

这样的东西

orderGames(el) {
    var boxList = $(el).find('.box');
    var container = $(el).find('.box-list-container');
    boxList.sort(function (a, b) {
        return $(a).data("order") - $(b).data("order");
    });
    container.html(boxList);
}

并像

一样使用它

orderGames(this)

注意： .find() 获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。。虽然我不知道你的结构，但我无法确定你的jquery功能需要的可能是.find()，.prev()，.closest() ..等等

Angular：使用jQuery按数据顺序排序

2 个答案: