时间戳

首页 > 解决方案 > 如何使用 HTML 在 Angular 6 的一列中设置 6 个按钮

html - 如何使用 HTML 在 Angular 6 的一列中设置 6 个按钮

问题描述

我正在为机票预订创建一个应用程序。在客户选择位置的部分，我想在一行中放置 6 个按钮。我正在使用 List 来显示我所有的按钮。如图所示，前 6 个按钮的位置正确（红色按钮）。但是蓝色按钮应该在下一行（就像我在图片上显示的那样）。我怎样才能做到这一点？

在此处输入图像描述

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));
}}

标签： htmlangulartypescriptbutton

解决方案

在一个容器中渲染列表并仅使用 CSS 对其进行样式设置既困难又乏味。

提供的平面布局在行之间的间距不均匀（旋转 90 度时的列）我会考虑更换它或放弃它。

我的解决方案相当简单：飞机有两侧座位（ABC，DEF）将它们视为容器，将它们分开添加即。创造通道的边距。在每个容器中渲染所有座位并使用 flexbox 将它们包装到新列。这是演示

其他选项：

  • CSS 网格https://css-tricks.com/snippets/css/complete-guide-grid/ 将所有内容呈现在一个容器中，并使用网格/列将其塑造成您喜欢的形状。（不知道是否允许不均匀间距）
  • 表/ divdisplay:table 创建覆盖整个平面的表并调整单元格大小以匹配所需的尺寸。在 tr 和 td 上使用 nth-child(n) 来设置适当的间距。在 *ngFor 中使用多个 ng-containers 来选择放置详细信息组件的位置以及为间距留空白的位置。

推荐阅读