Angular2 Material2 ‹md-spinner› не отображается, но работает

Я предполагаю, что мой css неверен, но, увы, я не могу этого понять.

<div *ngIf="loading">
  <md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle>
</div>
<md-list>
  <md-list-item *ngFor="let incident of incidents">
    <h3 md-line> {{name}} </h3>
    <p md-line>
      <span>{{date}} > </span>
      <span>{{text}}</span>
    </p>
  </md-list-item>
</md-list>

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


angular angular-material2
person bdparrish    schedule 11.01.2017    source источник
comment
Вы связали одну из тем @ angular / material со своим проектом? Я обнаружил, что некоторые элементы управления работают нормально, но другие полностью не работают без этого.   -  person Micheal Hill    schedule 12.01.2017

Ответы (5)


arrow_upward
14
arrow_downward

Убедитесь, что вы используете тему для @ angular / material.

Из руководства по началу работы:

Включите основные стили и стили темы:

Это необходимо для применения к вашему приложению всех основных стилей и стилей темы. Вы можете использовать предварительно созданную тему или определить свою собственную тему.

Я обнаружил, что использование @ angular / material без темы работает только в некоторых случаях. Текстовый ввод работает, но радиокнопки, флажки - и, похоже, счетчики - требуют правильной работы темы.

Как указано в цитате, вы можете использовать одну из предоставленных тем (в настоящее время их 6) или создать свою собственную. Предоставленные темы могут быть включены в ваш CSS с помощью @import('~@angular/material/core/theming/prebuilt/<theme>.css').

person Micheal Hill    schedule 12.01.2017

arrow_upward
1
arrow_downward

Для меня исправление этих свойств помогает

/deep/ .mat-progress-spinner circle, /deep/ .mat-spinner circle {
    stroke: white;
}

где white - ваш видимый цвет прядильщика

person Vlad    schedule 19.12.2017

arrow_upward
0
arrow_downward

Изменять:

[цвет] = "'предупреждать'" [режим] = "'неопределенный'"

Используйте квадратные скобки для переплета. Поскольку вы назначаете строки напрямую, вы должны использовать "и"

Добавьте эту строку в заголовок index.html

‹Ссылка href =" https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css "rel =" stylesheet "›

person Brian Parker    schedule 11.01.2017
comment
Квадратные скобки используются для привязки, но не имеют значения, привязываете ли вы строковый литерал. [color]="'warn'" идентичен color="warn" - person Micheal Hill; 12.01.2017
comment
имело значение, когда я его тестировал ... и это сработало ... А вы? - person Brian Parker; 12.01.2017
comment
вы также можете ввести стиль по умолчанию, добавив строку в styles.css, если вы используете cli @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; - person Brian Parker; 12.01.2017
comment
Первому; неа, без разницы. У меня работает без скобок или с. См. здесь. Также из педантичности ко второму; это тема, которая не является стилем по умолчанию. По определению используется значение по умолчанию, когда ничего другого не предусмотрено. @ angular / material не предоставляет тему по умолчанию, поэтому ее приходится связывать вручную. - person Micheal Hill; 12.01.2017

arrow_upward
0
arrow_downward

В моем случае у меня был счетчик с потрясающим шрифтом, и он работал, но не отображался, потому что файл css FontAwesome еще не был полностью загружен. Решением было использовать npm angular2-fontawesome, а не связывать файл css в индексе .html.

person maia    schedule 28.11.2017

arrow_upward
0
arrow_downward

В моем аналогичном случае счетчик не показывает и не выдает ошибки на экране, даже тег анализируется, я пробовал тег с ошибкой и тег углового выброса не ожидался ...

Исправление заключалось в том, чтобы убедиться, что MatProgressSpinnerModule импортирован в приложение. После того, как импортированный спиннер обнаружился отлично.

Я предполагаю, почему тег анализируется, когда модуль счетчика прогресса еще не импортирован, и я полагаю, что этот тег зарегистрирован в другом более общем импортированном модуле, не уверен, в каком.

person Wolfium    schedule 05.10.2018