css - 为什么 Bootstrap 表不使用 Angular 7 中的样式？

Question

我尝试在 Angular 7.2 元素中创建简单的 Bootstrap 表，但它不使用任何样式。我只看到原始文本。知道为什么它不起作用吗？

组件.ts:

elements: any = [
    {id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
    {id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
    {id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
  ];

  headElements = ['ID', 'First', 'Last', 'Handle'];

组件.html:

<table mdbTable striped="true">
  <thead>
    <tr>
      <th *ngFor="let head of headElements" scope="col">{{head}} </th>
    </tr>
  </thead>
  <tbody>
    <tr mdbTableCol *ngFor="let el of elements">
      <th scope="row">{{el.id}}</th>
      <td>{{el.first}}</td>
      <td>{{el.last}}</td>
      <td>{{el.handle}}</td>
    </tr>
  </tbody>
</table>

angular.json:

    "styles": [
      "src/styles.scss",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/assets/sass/paper-kit.scss",
      "src/assets/css/demo.css",
      "src/assets/css/nucleo-icons.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.slim.min.js",
      "node_modules/popper.js/dist/umd/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],

样式.scss:

@import "~bootstrap/dist/css/bootstrap.css";

应用程序模块.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
imports: [
    ...,
    NgbModule.forRoot(),
    ...
  ],
 ...
bootstrap: [AppComponent]

Answer 1

要使用 Bootstrap 表，只需添加类 table，对于 striped，添加 table-striped

<table  class="table table-striped">
</table

但是您的 HTML 显示您使用了 mdbootstrap .你需要安装angular-bootstrap-md

npm i angular-bootstrap-md