Таблица начальной загрузки с * ngFor в Angular 5 - PullRequest
Новая
       8

Таблица начальной загрузки с * ngFor в Angular 5

0 голосов
/ 07 мая 2018

Я хочу, чтобы мой стол был рядом, а не друг под другом. Я пробовал настольные форматы Bootstrap, но он не работает в моем приложении. Это код: 

<div class="panel-body">
    <div class="row">
      <table class="table">
        <tr *ngFor="let property of this.getKeyValues(this.navbarService.countriesOzetInfo[0].properties)">
          <div *ngIf="this.navbarService.countriesOzetInfo[0].properties[property] != null">
            <td>
              <a href="#" class="btn btn-danger btn-lg" role="button">
                <span class="glyphicon glyphicon-list-alt"></span>
                <br/>Apps</a>
            </td>
          </div>
        </tr>
      </table>
    </div>
  </div>

1 Ответ

0 голосов
/ 07 мая 2018

В вашем коде у вас есть 1 td для каждого tr (строки), поэтому кнопки отображаются вертикально.То, что вам нужно сделать, это определить количество строк и столбцов, которые вы хотите иметь.

В вашем случае вы должны разделить массив, возвращенный от this.getKeyValues(this.navbarService.countriesOzetInfo[0].properties) до array из array, то есть [[property1 to property6],[property7 to property12],[property13 to property18]]

Таким образом, вы можете использовать массив массивов для повторения строк и столбцов, используя *ngFor, как для tr, так и для td.

Разделите массив на rows и columns в component.т.е. 

getRows() {
    let rows= [];;
    let tempArray=
    this.getKeyValues(this.navbarService.countriesOzetInfo[0].properties;
    let i,j,chunk = 6;
    for (i=0,j=tempArray.length; i<j; i+=chunk) {
        rows[i]= array.slice(i,i+chunk);
    }
    return rows;  
}

Подход 1: использование одной переменной array, которая определяет столбцы, а затем использование *ngFor

   <div class="panel-body">
        <div class="row">
          <table class="table">
            <tr *ngFor="let row of rows"> <!-- rows is newly created array of array-->
                <td *ngFor="let column of  row "> <!-- row array that has details about columns-->
                  <a href="#" class="btn btn-danger btn-lg" role="button">
                    <span class="glyphicon glyphicon-list-alt"></span>
                    <br/>Apps</a>
                </td>
            </tr>
          </table>
        </div>
      </div>

Всего наилучшего

...