实现中的 formSelect() 方法在 angular 6 个输入中不起作用

Question

我正在使用 materialize CSS 结合 angular 6，我的问题是输入的标签如果它们从某些服务加载数据，标签会与输入的文本重叠。

在他们的官方文档中，他们使用此代码来修复此行为：

$(document).ready(function(){
    $('select').formSelect();
  });

但是如果我在 ngOnInit() 甚至 ngAfterViewInit() 中使用此代码，它会失败并出现此错误：

error TS2339: Property 'formSelect' does not exist on type 'JQuery'.

我已经 Jquery 导入了，显然没有检测到实体化脚本。我尝试从 CDN 和 angular.json 中导入脚本，如下所示：

 "styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"       
            ],
            "scripts": [  
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/materialize-css/dist/js/materialize.js"]

我需要做什么来解决这个问题？看起来是 angular 应用程序没有加载脚本，或者如果它正在加载脚本，则调用该函数还为时过早。

Answer 1

那是因为你导入了 jquery 这样的：

import * as $ from 'jquery';

试试这个：

$: any // declare dollar sign as a field variable

它应该起作用的原因是，当您从 jquery 导入 $ 时，它会在 jquery 方法中查找 formSelect() 方法，但它是 materialize.js方法。当您将 $ 声明为 any 时，您的代码编译成功，现在因为您已将 jquery 和 materialize.js 添加到脚本在您的 angular.json 应用程序运行中，它在 $

上识别 .formSelect()

实现中的 formSelect() 方法在 angular 6 个输入中不起作用

formSelect() method in materialize does'nt work in angular 6 inputs

materialize

angular