Флажок Material Design Lite не отображается должным образом

В моем файле index.html у меня есть:

  <!-- Material Design Lite -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-red.min.css" />
  <script src="/bower_components/material-design-lite/material.min.js"></script>
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="styles.css">

  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <script src="systemjs.config.js"></script>

И для флажка у меня есть следующий код:

<div class="demo-checkbox myCheck">
                <h5>You have choosen so far</h5>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Marriage Hall</span> 
                </label>

                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Caterer</span>
                </label>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox"  class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Decorator</span>
                </label>
            </div>

Однако это отображает флажки, как показано ниже:

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

Почему это так? Кнопки и другие компоненты отображаются правильно, только с флажком я сталкиваюсь с этой проблемой.


material-design angular material-design-lite
person Thinker    schedule 13.11.2016    source источник
comment
Вы видели какую-нибудь ошибку? Возможно, ошибка консоли, например 404, файл не найден?   -  person Michael    schedule 13.11.2016
comment
Нет такой ошибки нет!   -  person Thinker    schedule 13.11.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я поместил это в jsfiddle, и, добавив библиотеку js для дизайна материалов, флажки отображаются правильно, возможно, так вы ссылаетесь на свой js, попробуйте следующее:

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>
person diesel    schedule 17.11.2016
comment
Нет, к сожалению, не было! Я пытался даже изменить порядок моих файлов css, но не помогло. - person Thinker; 17.11.2016
comment
Я удалил ваши локальные настройки js и css, так что, возможно, что-то не так? - person diesel; 17.11.2016
comment
Да, что-то переопределяет, это правильно. Я не могу понять, что! Я проверил ваш файл, он выглядит идеально, но те же настройки не будут работать на моем локальном компьютере. - person Thinker; 17.11.2016
comment
начните с основного рабочего файла в соответствии со скрипкой, затем добавьте каждый файл js/css по отдельности, чтобы увидеть, какой файл вызывает проблему. - person diesel; 18.11.2016

arrow_upward
0
arrow_downward

Не было никаких проблем с переопределением javascripts по умолчанию mdl. У меня есть обходной путь, подобный следующему:

В моем соответствующем x.component.ts:

import { Component, OnInit } from '@angular/core';
declare var componentHandler: any;

ngOnInit() {
    componentHandler.upgradeAllRegistered();
}

Это решило проблему рендеринга

person Thinker    schedule 17.12.2016