Ошибка с материализацией в проекте Aurelia - PullRequest
Новая
       23

Ошибка с материализацией в проекте Aurelia

0 голосов
/ 03 ноября 2018

Добрый день,

У меня есть проект .Net Core 2.1 с установкой Aurelia. Для установки материализации я следовал этому:

https://aurelia -ui-toolkits-1.gitbook.io / материализовать-мост-документы /

Но у меня проблема в том, что я не могу использовать селектор, видимо, как будто он не был инициализирован, я передаю информацию из файлов

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());
}

Результат на экране:

введите описание изображения здесь

Есть идеи? Спасибо:)

1 Ответ

0 голосов
/ 06 ноября 2018

Можете ли вы повторить попытку и убедитесь, что вы делаете следующее.

Пробег 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);
  }
}

View 

<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>
...