Question

我有一个屏幕，它将从数据库中显示数据。我已经尝试过离子1中的网格视图。但离子3我不知道如何做网格视图。从数据库我将得到10或11或13个类别的名称，我需要在网格视图中显示的名称与背景一些图像。

我知道如何显示背景图片。但是我需要每行显示2个col。我将使用我的代码从数据库中获取数据.....

  another(loading:any) {

        this.subcatdata = { CatID: this.categoryid };

        this.authService.subcatte(this.subcatdata).then((result) => {

            this.data = result;

            console.log(this.data);

            if (this.data.status == 1) {
                this.Catdata = this.data.SubCatgeoryList;


                for (let i = 0; i < this.Catdata.length; i++) {
                    console.log(this.Catdata[i].SubCategoryName);
                }
            }

            else if (this.data.status == 0) {

                let alert = this.alertCtrl.create({
                    title: 'Error',
                    subTitle: 'Please Enter Valid Username & Password',
                    buttons: ['OK']
                });
                alert.present();
            }
            loading.dismiss();            

        }, (err) => {
            loading.dismiss();
        });
    }

在上面的代码中，我将使用下面的代码获取子目录名称：

for (let i = 0; i < this.Catdata.length; i++) {
                        console.log(this.Catdata[i].SubCategoryName);
                    }

在我的HTML

中

<div class="item item-body no-padding" style="border-width: 0px !important;">  

  <div class="row no-padding" *ngFor="let data of Catdata; let i = index" (click)="openresources(Catdata[i].SubCatID)">

          <div class="col col-50 custom-design2" style="background: url(background url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{Catdata[i].SubCategoryName}}</span></div>
            </div>
</div> 


</div>

我的scss：

.gallery {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
  div.no-padding, ion-item.no-padding {
  padding: 0 !important;
}
div.custom-design2 {
  height: 153px;
    padding: 1px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #FFF !important;
}
.no-scroll .scroll-content{
     overflow: hidden;
}

div.custom-design1 {
  text-align: center;
    padding: 1px;
    height: 153px;
    vertical-align: middle;
    position: relative;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    width: 100%;
}

div.custom-design1.extended {
    height: 153px;
}

span.grid-title {
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.transparent {
    background: transparent !important;
}

.full_height {
    height: 100% !important;
    border: none;
}

现在在我的屏幕上，它会像每行一个数据一样，具有完整的行背景。

但我需要的是两个col（每行2个数据/子猫名）。我知道我们需要使用index + 1，但在离子3中我不知道该怎么做。

如果有任何帮助，那将是有帮助的

感谢。

离子3网格视图，每行两个col

0 个答案: