materialize 中的 formSelect() 方法在 Angular 6 输入中不起作用答案

【问题标题】：formSelect() method in materialize does'nt work in angular 6 inputsmaterialize 中的 formSelect() 方法在 Angular 6 输入中不起作用
【发布时间】：2019-01-14 20:34:32
【问题描述】：

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

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

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

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

错误 TS2339：类型上不存在属性“formSelect” '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"]

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

【问题讨论】：

你能说出formSelect()方法的用途吗？
来自materializeCss官网的用于初始化select元素，尝试在materialize.js中搜索但没有结果。

标签： angular materialize

【解决方案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 中的scripts > 在应用程序运行中，它在$ 上识别.formSelect()

【讨论】：