Question

我正在使用Ionic 3 / Angular 5，试图为组件中一个很高的桌子设置一个浮动的水平滚动条。我遇到了应该很好用的解决方案：Floating horizontal scroll bar for html table

问题是我无法将jQuery函数导入到我的组件中。

到目前为止，我已经成功安装了jQuery，并且可以正常工作。此外，我已经将jQuery插件导入到我的索引中：

<script src="assets/jquery.ba-floatingscrollbar.min.js"></script>

如何将其包含在组件中？目前，我收到一个错误：

类型“ JQuery”上不存在属性“ floatingScrollbar”

组件

import { Component } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'tall-table',
  templateUrl: 'tall-table.html'
})
export class TallTableComponent {

  constructor() {
  }

  ngAfterViewInit(): void { 
    $('#horz-scroll-wrapper').floatingScrollbar();
  }

}

tall-table.html

<div id="horz-scroll-wrapper" style="width: 300px; overflow: scroll">
    <div style="height: 100%;">
        <table class='sample'>
            <tbody>
                <tr *ngFor="let row of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]">
                    <td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td><td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

您是否已安装jQuery全局存储区以进行输入？

npm install @types/jquery

如何在Ionic和Angular中安装jQuery插件

1 个答案: