Как показать не более двух строк в ioni c 4 - PullRequest
Новая
       4

Как показать не более двух строк в ioni c 4

0 голосов
/ 31 марта 2020

У меня есть список категорий, который отображается динамически в строках и столбцах.
Но я хочу показать только две строки, и если он содержит более двух строк, чем кнопка Показать Больше.
Текущий сценарий показывает это Все категории. Но хочу показать только 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" , "имя": "Химия", "образ": "https://codehub.biz/knowledgeup/API/images/Chemastry_Categaries_Icons.png"}, { "CategoryId": "5", "имя": "Экономика", "образ": "https://codehub.biz/knowledgeup/API/images/Economy.png "}, {" CategoryId ":" 6" , "имя": "Спорт", "образ": "https://codehub.biz/knowledgeup/API/images/sports_categaries_icons.png"}, { "CategoryId": "7", "имя": "Физика",» 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 ":" Наука и изобретения "," image ":" https://codehub.biz/knowledgeup/API/images/science.png "}, {" categoryId ":" 11 "," name ":" test "," image ":" https://codehub.biz/knowledgeup/API/images/bg.png "}, {" categoryId ":" 12" , "название": "test1234", "образ": "* тысяча двадцать-один *"}, { "CategoryId": "13", "название": "binjal", "образ": "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);
    });
  }

1

1 Ответ

0 голосов
/ 31 марта 2020

Вы можете отслеживать индексы и использовать их с 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>

Как-то так

...