为什么在bootstrap 4中angular-datatable不填充列？

Question

我尝试使用angular-datatables (用于angular 7)和bootstrap 4设置响应表，但这是该表的当前方面：

​

​

当前HTML代码：

<div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-bordered">
                                    <thead class="thead-colored thead-primary">
                                        <tr class="text-center">
                                            <th>ID</th>
                                            <th>NICKNAME</th>
                                            <th>EMAIL</th>
                                            <th>REGISTRO</th>
                                            <th>ESTATUS</th>
                                            <th>ALTA</th>
                                            <th>ACCIONES</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let usuario of usersArray" class="text-center">
                                            <td>{{usuario.ID}}</td>
                                            <td>{{usuario.NICKNAME}}</td>
                                            <td>{{usuario.EMAIL}}</td>
                                            <td>{{usuario.REGISTRO | date: 'dd-MMMM-yyyy' | uppercase}}</td>
                                            <td>
                                                <span class="bg-success pd-y-3 pd-x-10 text-white tx-11 tx-roboto">
                                                            {{usuario.ESTATUS | toStatusReadable}}
                                                        </span>
                                            </td>
                                            <td>{{usuario.PROVEEDORACCESO}}</td>
                                            <td>
                                                <div type="button" class="dropdown">
                                                    <a [routerLink]="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
                                                        <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
                                                            <span class="mg-r-10 tx-13 tx-medium">Opciones</span>
                                                            <img src="https://via.placeholder.com/500" class="wd-25 rounded-circle" alt="">
                                                            <i class="fas fa-angle-down"></i>
                                                        </div>
                                                    </a>
                                                    <div class="dropdown-menu pd-10 wd-200">
                                                        <nav class="nav nav-style-2 flex-column">
                                                            <a [routerLink]="" class="nav-link"><i class="icon fas fa-edit"></i> Editar datos</a>
                                                        </nav>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

表的TS文件代码：

export class AdministradoresComponent implements OnInit, OnDestroy {
  /* dtOptions: DataTables.Settings = {}; */
  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();

  usersArray: Array<Users> = [];

  constructor(
    private devInfo: DevelopmentService,
    private dtService: DatatableService,
    private administradoresService: AdministradoresService
  ) {
    this.ObtenerUsuariosSmartlive();
  }

  ngOnInit() {
    document.getElementById('mainSystemPanel').removeAttribute('class');
    document.getElementById('mainSystemPanel').className = 'br-mainpanel';
    this.dtOptions = this.dtService.getDataTableConfig();
  }

  ngOnDestroy() {
    this.dtTrigger.unsubscribe();
  }

  async ObtenerUsuariosSmartlive() {
    const usuarios = <any []> await this.administradoresService.getSmartliveUsersList();
    for ( let i = 0; i < usuarios.length; i++) {
      this.usersArray.push(JSON.parse(usuarios[i]));
    }
    this.dtTrigger.next();
  }
}

提供表配置的服务：

export class DatatableService {

  constructor() {
  }

  getDataTableConfig() {
    return {
      language: {
        url: 'assets/content/smartlive/spanish.json'
      },
      responsive: true
    };
  }
}

angular.json代码片段：

"styles": [
                            "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                            "node_modules/animate.css/animate.min.css",
                            "src/assets/content/template/lib/ionicons/css/ionicons.min.css",
                            "src/assets/content/template/lib/rickshaw/rickshaw.min.css",
                            "src/assets/content/template/lib/select2/css/select2.min.css",
                            "src/assets/content/template/css/bracket.css",
                            "src/assets/content/template/css/bracket.oreo.css",
                            "node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
                            "node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css",
                            "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
                            "src/styles.css"
                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.js",
                            "node_modules/datatables.net/js/jquery.dataTables.js",
                            "node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js",
                            "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"
                        ]

我已经安装了datatable的所有包文件，但是我不能设置正确的100%宽度，并且分页和搜索输入总是在表上有一个错误的位置。

Answer 1

有点晚了，但它可能会对其他人有帮助;-)

尝试：

npm install datatables.net-bs4

然后调用：

"styles": [
   ...
   "./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
   ...
],
"scripts": [
   ...
   "./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
   ...
],