Как установить 6 кнопок в колонке в Angular 6, используя HTML - PullRequest
Новая
       15

Как установить 6 кнопок в колонке в Angular 6, используя HTML

0 голосов
/ 13 января 2019

Я создаю приложение для бронирования авиабилетов. В той части, где клиент выбирает место, я хочу поставить 6 кнопок в ряд. Я использую Список, чтобы показать все мои кнопки. Как и на картинке, первые 6 кнопок имеют правильное положение (красные кнопки). Но синие кнопки должны быть в следующем ряду (как я показываю на картинке). Как мне этого добиться?

enter image description here

myplaces-list.component.html 

<div class="inventory-body" >
 <h3 align="center">Wybierz miejsce</h3>
 <div *ngFor="let myplace of myplaces | async" style="width: 300px;">
 <myplace-details [myplace]='myplace'></myplace-details>
</div>
</div>

myplaces-list.component.ts 

export class MyplacesListComponent implements OnInit {

myplaces: Observable<Myplace[]>;
place_id: number;

flight: Flight = new Flight();
submitted = false;
flight_id: number;

places: Observable<Place[]>;

constructor(private myplaceService: MyplaceService, private placeService: PlaceService, private flightService: FlightService,
          private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
this.route.params.subscribe(params => { this.flight_id = params['flight_id']; });
this.flightService.getFlight(this.flight_id).subscribe(t => this.flight = t);
this.reloadData();
}

reloadData() {
this.myplaces = this.myplaceService.fetchEmpDeptDataInnerJoin(this.flight_id);
this.places = this.placeService.getPlacesList();
}}

myplace-details.component.html - мои кнопки здесь 

<div *ngIf="myplace" style="position: relative; left:-30%; margin-left:10px; margin-bottom:12px">
<div>
<a href="http://localhost:4200/ticket/{{myplace.flight_id}}/{{myplace.place_id}}"
 *ngIf='myplace.active' (click)='updateActive(false)' class="button btn-primary">{{myplace.location}}</a></div>

<span class="button btn-danger" *ngIf='!myplace.active' >{{myplace.location}}   </span>

MyPlace-details.component.ts 

export class MyplaceDetailsComponent implements OnInit {

@Input() myplace: Myplace;

place_id: number;

constructor(private myplaceService: MyplaceService, private listComponent: MyplacesListComponent) { }

ngOnInit() {
this.place_id = this.myplace.place_id;
}

updateActive(isActive: boolean) {
this.myplaceService.updatePlace(this.place_id,
  { location: this.myplace.location, active: isActive })
  .subscribe(
    data => {
      console.log(data);
      this.myplace = data as Myplace;
    },
    error => console.log(error));
}}

1 Ответ

0 голосов
/ 13 января 2019

Рендеринг списка в одном контейнере и оформление его с помощью всего лишь CSS сложно и утомительно.

Предоставленная компоновка плоскости имеет неравномерное расстояние между рядами (столбцы при повороте на 90 градусов) Я хотел бы заменить его или отказаться от него.

Мое решение довольно простое: у самолета есть две стороны посадочных мест (ABC, DEF), которые рассматривают их как контейнеры, добавляя пространство, т.е. маржа, которая создает проход. В каждом контейнере рендеринг всех сидений и с помощью flexbox оберните их в новую колонку. Вот демоверсия

Другие опции:

  • CSS-сетка https://css -tricks.com / snippets / css / complete-guide-grid / Визуализируйте все в одном контейнере и используйте сетки / столбцы, чтобы придать им нужную форму. (Не знаю, допускает ли неравномерное расстояние)
  • Таблица / div с display:table Создайте таблицу, охватывающую всю плоскость, и отрегулируйте размеры ячеек в соответствии с требуемыми размерами. Используйте nth-child (n) для tr и td для стилизации соответствующих интервалов. используйте несколько ng-контейнеров в * ngFor, чтобы выбрать, куда поместить компоненты деталей размещения, а где оставить пробелы для интервалов.
...