如何在离子4中显示不超过两行

Question

我有一个类别列表，它在行和列中动态显示。
但我只想显示两行，如果它包含的行多于显示按钮查看更多。
目前的情况是它显示所有类别。但只想显示 2 行。

怎么做。

回应

[{"categoryId":"1","name":"General Knowledge","image":"https://codehub.biz/knowledgeup/API/images/gk_categaries_icons.png"},{"categoryId":"3","name":"Biology","image":"https://codehub.biz/knowledgeup/API/images/biology_categaries_icons.png"},{"categoryId":"4","name":"Chemistry","image":"https://codehub.biz/knowledgeup/API/images/Chemastry_Categaries_Icons.png"},{"categoryId":"5","name":"Economy","image":"https://codehub.biz/knowledgeup/API/images/Economy.png"},{"categoryId":"6","name":"Sports","image":"https://codehub.biz/knowledgeup/API/images/sports_categaries_icons.png"},{"categoryId":"7","name":"Physics","image":"https://codehub.biz/knowledgeup/API/images/physics.png"},{"categoryId":"8","name":"World Geography","image":"https://codehub.biz/knowledgeup/API/images/geo.png"},{"categoryId":"10","name":"Science & Inventions","image":"https://codehub.biz/knowledgeup/API/images/science.png"},{"categoryId":"11","name":"test","image":"https://codehub.biz/knowledgeup/API/images/bg.png"},{"categoryId":"12","name":"test1234","image":"https://codehub.biz/knowledgeup/API/images/2745032977bg.png"},{"categoryId":"13","name":"binjal","image":"https://codehub.biz/knowledgeup/API/images/651543756ON40S50.jpg"}]

tab1.html

<div>
    <ion-label class="label">All</ion-label>
    <ion-grid>
      <ion-row class="margin" *ngFor="let row of grid">
        <ion-col size="3" class="ion-text-center" *ngFor="let item of row"
          (click)="quizInfo(item.categoryId,item.name,item.image)">
          <img class="logo" [src]='item.image' *ngIf="item"> <br>
          <p class="margin title" *ngIf="item">{{item.name}}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

tab1.ts

public categoryList: any;
  grid: Array<Array<string>>;
  gridLength: any;

getCategoryData() {
    let loading = this.loadingCtrl.create({
      spinner: 'circles',
      message: 'Please wait...'
    }).then(loading => loading.present());

    this.authService.getData("getcategories.php").then((result) => {
      this.categoryList = result;
      console.log(this.categoryList);

      this.grid = Array(Math.ceil(this.categoryList.length / 4)); //MATHS!
      this.gridLength = this.grid.length;
      console.log(this.gridLength);

      if(this.gridLength>2){
        this.txt = "more than 2 rows";
      } else {
        this.txt = "less than or equal to 2 rows";
      }

      console.log(this.txt);

      let rowNum = 0; //counter to iterate over the rows in the grid

      for (let i = 0; i < this.categoryList.length; i += 4) { //iterate images

        this.grid[rowNum] = Array(4); //declare two elements per row

        if (this.categoryList[i]) { //check file URI exists
          this.grid[rowNum][0] = this.categoryList[i] //insert image
        }

        if (this.categoryList[i + 1]) { //repeat for the second image
          this.grid[rowNum][1] = this.categoryList[i + 1]
        }

        if (this.categoryList[i + 2]) { //repeat for the second image
          this.grid[rowNum][2] = this.categoryList[i + 2]
        }

        if (this.categoryList[i + 3]) { //repeat for the second image
          this.grid[rowNum][3] = this.categoryList[i + 3]
        }

        rowNum++; //go on to the next row
      }

      this.loadingCtrl.dismiss();
    }, (err) => {
      this.loadingCtrl.dismiss();
      console.log("Error", err);
    });
  }

Answer 1

您可以跟踪索引并将其与 ngIf 一起使用。

<ion-row class="margin" *ngFor="let row of grid; let i = index;">
<ion-col *ngIf="i < 10"
.....
<span *ngIf="i === 10">Show more</span>

像这样

如何在离子4中显示不超过两行

How to show not more than two rows in ionic 4

android

row

ionic-framework

angular

ionic4