Question

我希望我的桌子并排在彼此之下。我尝试了Bootstrap的表格格式，但它在我的应用程序中无效。这是代码：

＆＃13;

<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>

＆＃13;

Answer 1

在您的代码中，每个td（行）都有1个tr，因此按钮会垂直显示。您需要做的是决定您想要的行数和列数。

在您的情况下，您应该将从this.getKeyValues(this.navbarService.countriesOzetInfo[0].properties)返回的数组除以array的{{1}}，即array

因此，您可以使用[[property1 to property6],[property7 to property12],[property13 to property18]]和*ngFor上的tr来使用数组数组来重复行和列。

将数组划分为td中的rows和columns。即。

component

方法1：使用一个确定列的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; }变量，然后使用array

*ngFor

一切顺利

在Angular 5中并排带有* ngFor的Bootstrap表

1 个答案: