Question

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

目前，应用程序将使用此库b / c它与AoT配合得很好，所以现在我们一直在使用它。

除了调整cols之外，我还尝试了一些不同的hack，这些hack一直用于去年我在Angular 4中遇到的其他问题。就像利用Angular内置的阴影dom功能（View Encapsulation）那样并不起作用。我也尝试过更新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的

片段

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 - 一个带有标签https://plnkr.co/edit/n1dnAHvcWa2ENzIP9v7H?p=preview

的普通人

必须注意的是，我在我的应用程序中的dev-tools中看到了这种行为，但是开发工具~~在PLUNKER LIVE POP UP预览工具中似乎不允许左上角的响应式外形按钮UI的一角。不知道我怎么能模拟这个~~

对于此示例，使用Plunker的Chrome和Firefox中的响应行为功能。但是，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>

当我删除＆＃39;表单控件＆＃39;班级工作

这是最终的Plunker

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

1 个答案: