如何在 Ionic 3 中实现以下巴士座位布局安排？

大佬教程收集整理的这篇文章主要介绍了如何在 Ionic 3 中实现以下巴士座位布局安排？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 Ionic 3 中实现以下巴士座位布局安排？？

check this image

我在 HTML 代码中使用过这个 只是想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和座位巴士混合座位装载座位。 只是想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和座位巴士混合座位装载座位。 只想在 Ionic 3 中设置巴士卧铺和座位布局。用卧铺和巴士混合座位装载座位。

这是我的 HTML 代码：

        <div text-right>
            <img src="assets/imgs/ic_steering.png" alt="" style="height: 25px; wIDth: 25px;" />
        </div>

        <div *ngFor="let rowItem of multIDimArray" no-padding>

            <div class="seatrow container">

                <div *ngFor="let colitem of rowItem">

                    <div class="space" *ngIf="!colitem  ||(colitem&& colitem.name == '') "> &nbsp; </div>

                    <div *ngIf="colitem && colitem.length =='1' && colitem.wIDth =='1'">
                        <div *ngIf="colitem && colitem.available =='true' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_seater_unSELEcted.png"
                                alt="" class="unspace" />

                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_seater_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colitem && colitem.available =='false' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_seater_SELEcted.png"
                                alt="" class="unspace" />


                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_women_seater_SELEcted.png"
                                alt="" class="unspace" />
                        </div>
                    </div>

                    <div *ngIf="colitem && colitem.length =='2' && colitem.wIDth =='1'">
                        <div *ngIf="colitem && colitem.available =='true' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_sleeper_unSELEcted.png"
                                alt="" class="unspace" />

                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_sleeper_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colitem && colitem.available =='false' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_sleeper_SELEcted.png"
                                alt="" class="unspace" />


                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_women_sleeper_SELEcted.png"
                                alt="" class="unspace" />
                        </div>
                    </div>

                    <div *ngIf="colitem && colitem.length =='1' && colitem.wIDth =='2'">
                        <div *ngIf="colitem && colitem.available =='true' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_sleeper_unSELEcted.png"
                                alt="" class="unspace" />

                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_sleeper_women.png" alt=""
                                class="unspace" />

                        </div>

                        <div *ngIf="colitem && colitem.available =='false' && colitem.name != ''">
                            <img *ngIf="colitem.ladIEsSeat =='false'" src="assets/imgs/ic_sleeper_SELEcted.png"
                                alt="" class="unspace" />


                            <img *ngIf="colitem.ladIEsSeat =='true'" src="assets/imgs/ic_women_sleeper_SELEcted.png"
                                alt="" class="unspace" />
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>

解决方法

<div style:"display: flex" cols="12">
//first row    
<div style:"display: flex" cols="6">
</div>
//second row
<div style:"display: flex" cols="6">
</div>
</div>

大佬总结

以上是大佬教程为你收集整理的如何在 Ionic 3 中实现以下巴士座位布局安排？全部内容，希望文章能够帮你解决如何在 Ionic 3 中实现以下巴士座位布局安排？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。