Question

我有下表：

＆＃13;

<div>
  <table class="table-alignment table table-striped">
    <tr class="text text-center">
      <th>Symbol</th>
      <th>Quantity</th>
      <th>Timestamp</th>
      <th>Amount</th>
    </tr>
    <div *ngIf="loading == true" class="loader loader-alignment"></div>
    <div *ngIf="loading == false">
      <tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
        <td>{{s.tradingsymbol | formatSymbol}}</td>
        <td>{{s.filled_quantity}}</td>
        <td>{{s.order_timestamp}}</td>
        <td>{{s.average_price}}</td>
      </tr>
    </div>
  </table>
</div>

＆＃13;

这里的问题是整个tr在第一列中呈现。我该如何解决这个问题？

Answer 1

考虑使用基本HTML元素thead和tbody。另外，例如，您不必编写loading == false，而是写!loading。

<div>
  <table class="table-alignment table table-striped">
    <thead>
      <tr class="text text-center">
        <th>Symbol</th>
        <th>Quantity</th>
        <th>Timestamp</th>
        <th>Amount</th>
      </tr>
    </thead>
    <div *ngIf="loading" class="loader loader-alignment"></div>
    <tbody *ngIf="!loading">
      <tr *ngFor = "let s of stats" class = "text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
        <td>{{s.tradingsymbol | formatSymbol}}</td>
        <td>{{s.filled_quantity}}</td>
        <td>{{s.order_timestamp}}</td>
        <td>{{s.average_price}}</td>
      </tr>
    </tbody>
  </table>
</div>

表行在第一列中进行调整

1 个答案: