带有Ng-bootstrap的角8材料

Question

我在我的angular 8项目中使用ng-bootstrap。我想用物料，mailgun和sales.js创建联系表格。

向我的项目添加材料（ng添加@ angular / material，然后选择一个主题）并尝试使用元素（matslide）时，它不起作用，也没有出现。

如何使用材料和ng-boostrap？

angular.json

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
            ],

main.ts

import { MatSliderModule } from "@angular/material/slider";
imports: [
    MatSliderModule, ...

app-main»app-contact

<div class="container">
    <div class="row">
        <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
    </div>
</div>

在渲染后的DOM中，但是什么也看不到，只是空白行

<mat-slider
  _ngcontent-mnq-c4=""
  class="mat-slider mat-accent mat-slider-horizontal mat-slider-min-value"
  max="100"
  min="1"
  role="slider"
  step="1"
  value="1"
  ng-reflect-max="100"
  ng-reflect-min="1"
  ng-reflect-step="1"
  ng-reflect-value="1"
  tabindex="0"
  aria-disabled="false"
  aria-valuemax="100"
  aria-valuemin="1"
  aria-valuenow="1"
  aria-orientation="horizontal"
  style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
  ><div class="mat-slider-wrapper">
    <div class="mat-slider-track-wrapper">
      <div
        class="mat-slider-track-background"
        ng-reflect-ng-style="[object Object]"
        style="transform: translateX(7px) scale3d(1, 1, 1);"
      ></div>
      <div
        class="mat-slider-track-fill"
        ng-reflect-ng-style="[object Object]"
        style="transform: translateX(-7px) scale3d(0, 1, 1);"
      ></div>
    </div>
    <div
      class="mat-slider-ticks-container"
      ng-reflect-ng-style="[object Object]"
      style="transform: translateX(0%);"
    >
      <div
        class="mat-slider-ticks"
        ng-reflect-ng-style="[object Object]"
        style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%); padding-left: 7px;"
      ></div>
    </div>
    <div
      class="mat-slider-thumb-container"
      ng-reflect-ng-style="[object Object]"
      style="transform: translateX(-100%);"
    >
      <div class="mat-slider-focus-ring"></div>
      <div class="mat-slider-thumb"></div>
      <div class="mat-slider-thumb-label">
        <span class="mat-slider-thumb-label-text">1</span>
      </div>
    </div>
  </div></mat-slider
>

Answer 1

使用cli安装角材后：