我尝试在 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]
最佳答案
要使用 Bootstrap 表,只需添加类 table
,对于 striped,添加 table-striped
<table class="table table-striped">
</table
但是您的 HTML 显示您使用了 mdbootstrap .你需要安装angular-bootstrap-md
npm i angular-bootstrap-md
关于css - 为什么 Bootstrap 表不使用 Angular 7 中的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57840288/