ngx-bootstrap 选项卡破坏引导表响应能力

Question

我正在使用一个 ngx 选项卡集，它调用使用 Bootstrap 3.3.7 组件的各种 Angular 4 组件。在其中一个选项卡中，我显示了一个非常基本的 Bootstrap 表。出于某种原因，我在选项卡中失去了表格响应能力—— 该表只是一起使这些字段几乎无法使用。应用程序中的其他表（未封装在 ngx 组件中）工作得很好。只是为了让事情更有趣，我在不同的选项卡中有一个相当复杂的表单，它按预期响应。

目前，该应用程序将使用这个库 b/c 它与 AoT 配合得很好，所以现在我们只能使用它。

除了调整 cols 之外，我还尝试了一些不同的技巧，这些技巧可以解决我去年在 Angular 4 中遇到的其他问题。就像利用 Angular 内置的 shadow dom 功能（视图封装）一样，那是行不通的。我也尝试过更新 ngx，甚至尝试将 Angular 4.6 迁移到 5.2 ..这也没有任何效果。我无法将 Bootstrap 迁移到较新的版本，因为这会极大地改变外观和感觉。只是寻找任何想法/意见，因为他们将不胜感激！

Tabs.html

<div class="container">
    <tabset type="tabs" class="nav nav-tabs" #tabselect>
        <br /><br />      
        <tab heading="Tab 1" class="active" name="tab1">
            <app-tab-one></app-tab-one>
        </tab>
        <tab heading="Tab 2" name="tab2">
            <app-tab-two></app-tab-two>
        </tab>
        <tab heading="Tab 3" name="tab3">
            <app-tab-three></app-tab-three>
        </tab>
        <tab heading="Tab 4" name="tab4">
            <app-tab-four></app-tab-four>
        </tab>
    </tabset>
</div>

---

Tab1.html

<div class="container">
  <div class="row col-xs-12">
      <h3>Select Data</h3>
  </div>
  <br />
  <br />
  <table class="table table-striped table-responsive">
      <tbody>
          <tr class="header">
              <th class="text-xs-left col-md-0">Number</th>
              <th class="text-xs-left col-md-0 col-lg-6">Data 1</th>
              <th class="col-md-3 col-lg-3 margin-top-xs">Data 2</th>
              <th class="col-md-3 col-lg-3 margin-top-xs">Data 3</th>
              <th class="col-md-3 col-lg-2 margin-top-xs"></th>
          </tr>
          <tr *ngFor="let x of data; let idn = index">
              <td>{{idn+1}}</td>
              <td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
                  <select class="col-md-2 margin-top-xs form-control" [(ngModel)]="data[idn].data1">
                  <option value="">Please select prefix</option>
                  <option *ngFor="let x of data" type="text">{{x.data1}}</option>
                  </select>
              </td>
              <td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
                  <input type="text" class="form-control" maxlength="5" />
              </td>
              <td class="col-md-3 margin-top-xs col-lg-4">
                  <input type="text" class="form-control" />
              </td>
              <td class="col-md-2 col-lg-2 text-right margin-top-xs">
                  <button class="btn btn-primary">Button</button>
              </td>
          </tr>
      </tbody>
  </table>
</div>

---

来自 Tab1.component.ts 的 sn-p

import { Component, OnInit, ViewChild, Inject, ViewEncapsulation } from '@angular/core';

import { Data } from '../App/Models/Data';
import { TData } from '../App/Models/TData';

@Component({
    selector: 'app-tab-one',
    templateUrl: './Tab1.component.html',
    styleUrls: ['./tab-one.component.css'],
    providers: [ModalService, { provide: BsDropdownConfig, useValue: { autoClose: false } }]//,
    //encapsulation: ViewEncapsulation.Native ## this will enable ng Shadow Dom
})
export class TabOneComponent implements OnInit {

    tableData: Data[];
    tupleData: TData[];

***** 编辑 - 包括 Plunker 并进一步简化了代码。我保证成为更好的海报！！ ******

**** EDIT2 - 没有标签的 Plunker https://plnkr.co/edit/n1dnAHvcWa2ENzIP9v7H?p=preview

必须注意，我在我的应用程序的开发工具中看到了这种行为，但开发工具 在 PLUNKER LIVE POP UP PREVIEW TOOL 中似乎不允许左上角的响应式外形按钮UI 的一角。不知道我还能如何模拟这个

Chrome 和 Firefox 中的响应行为函数在本示例中使用 Plunker。但是，Firefox 允许在其开发工具的实时弹出预览中进行正式的外形模拟，而 Chrome 则不允许 ****

Answer 1

在重构并让 Plunker 对问题进行演示后，我已经证明这是一个 Bootstrap 问题（不确定是我的错还是错误），而不是 Ngx-Bootstrap 问题。事实证明，实际上只是 Bootstrap 表单类破坏了表格

<div class="container">
  <table class="table table-bordered">
      <thead>
        <tr class="header">
            <th class="col-xs-1">Number</th>
            <th class="col-xs-3">Data 1</th>
            <th class="col-xs-3">Data 2</th>
            <th class="col-xs-3">Data 3</th>
            <th class="col-xs-1"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let x of data; let idn = index">
            <td class="col-xs-1">{{idn+1}}</td>
            <td class="col-xs-3">
              <div class="form-group">
                <select class="form-control" [(ngModel)]="data[idn].data1">
                <option *ngFor="let x of data" type="text">{{x.data1}}</option>
                </select>
              </div>
            </td>
            <td class="col-xs-3">
                <input class="form-control" type="text" maxlength="5" />
            </td>
            <td class="col-xs-3">
                <input class="form-control" type="text" />
            </td>
            <td class="col-xs-1">
                <button class="btn btn-primary">Button</button>
            </td>
        </tr>
      </tbody>
  </table>
</div>

当我删除“表单控制”类时，一切正常

这是最后的Plunker