Я использую набор вкладок ngx, который вызывает различные компоненты Angular 4, которые используют компоненты Bootstrap 3.3.7. На одной из этих вкладок я показываю довольно простую таблицу Bootstrap. По какой-то причине я теряю отзывчивость таблицы внутри вкладки - таблица просто смешивается, делая поля практически непригодными для использования. Другие таблицы в приложении (не инкапсулированные в компонент ngx) работают нормально. Чтобы сделать вещи более интересными, у меня есть довольно сложная форма на другой вкладке, которая отвечает, как и ожидалось.
На данный момент приложение будет использовать эту библиотеку, потому что она хорошо работает с AoT, поэтому пока мы застряли в ее использовании.
Помимо настройки cols, я попробовал несколько различных хаков, которые помогли решить другие проблемы, с которыми я столкнулся с Angular 4 за последний год. Например, использование встроенной в Angular функции shadow 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 - Plunker без вкладок https://plnkr.co/edit/n1dnAHvcWa2ENzIP9v7H?p=preview
Следует отметить, что я наблюдаю такое поведение в инструментах разработки в моем приложении, но инструменты разработчика В ИНСТРУМЕНТЕ ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА PLUNKER LIVE POP UP, похоже, не позволяют использовать кнопку адаптивного форм-фактора в верхнем левом углу окна. UI. Не знаю, как еще можно смоделировать это
Функции отзывчивого поведения как в Chrome, так и в Firefox с использованием Plunker в этом примере. Но Firefox позволяет формально моделировать форм-фактор во всплывающем окне предварительного просмотра в инструментах разработчика, в то время как Chrome этого не делает.
