Question

美好的一天，

我有一个安装了Aurelia的.Net Core 2.1项目。对于实现的安装，我遵循以下步骤：

https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/

但是我有一个问题，就是我无法使用select，显然好像它没有初始化，我从文件中传递了信息

App.html

<template>
  <require from="materialize-css/dist/css/materialize.css"></require>
  <div class="input-field col s12">
   <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
   <label>Materialize Select</label>
</div>
</template>

App.ts

export class App {

  attached()
  {
     //Inicializar  los controles
     var element = document.querySelector("div.input-field select");
     M.FormSelect.init(element,{});
  }
}

Main.ts

import { PLATFORM, Aurelia } from "aurelia-framework";
import environment from './environment';
import "materialize-css";

export function configure(aurelia: Aurelia) {
 aurelia.use
   .standardConfiguration()
   .feature('resources')
    .plugin(PLATFORM.moduleName("aurelia-validation"))
 .plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll());

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  return aurelia.start().then(() => aurelia.setRoot());
}

屏幕显示结果

enter image description here

有什么想法吗？谢谢：）

Answer 1

您可以重试并确保执行以下操作吗。

运行npm install materialize-css@next @types/materialize-css

在main.ts内，添加以下内容。

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min.js';

ViewModel

export class App {
  attached() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  }
}

查看

<template>
    <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
</template>

在Aurelia项目中实现时出错

1 个答案: