javascript - 在 Angular 中动态显示表格

Question

我需要根据来自数据库的信息在 Angular 中动态显示表格

到目前为止，我有这个信息

[ { "BET": 57630343, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57633044, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57633047, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57635034, "CUSTOMER": 181645, "XX_FILL OPEN": true } ]

一切都与 XX...应该是button

在 HTML 中

      <table>
        <thead>
          <tr>
            <th>Bet</th>
            <th>Customer</th>
            <th>Fill Open Bet</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="pendingBet in pendingBets">
            <td> {{::pendingBet.BET}}</td>
            <td> {{::pendingBet.CUSTOMER}}</td>
            <td><button class="btn btn-danger">Fill</button></td> <!--{{pendingBet.XX_FILL_OPEN}}-->
          </tr>
        </tbody>
      </table>

我这里遇到的问题是:上面我有一些静态的东西

            <th>Bet</th>
            <th>Customer</th>
            <th>Fill Open Bet</th>

但有时<th>Bet</th>这是 <td> {{::pendingBet.BET}}</td>不是来自数据库，所以我不必显示它，所以我想知道我应该做什么来动态显示它

这种情况我该怎么办？

编辑

让我们更好地解释一下自己:

根据表格，<td> {{::pendingBet.BET}}</td>属于<th>Bet</th> ，但有时pendingBet.BET是 null所以我不必显示所有该列 <th>Bet</th>和<td> {{::pendingBet.BET}}</td> ，与 Customer 相同和Fill Open .

Answer 1

您可以使用ng-if关于<th>和<td> :

<table>
    <thead>
      <tr>
        <th ng-if="hasBetColumn">Bet</th>
        <th>Customer</th>
        <th>Fill Open Bet</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="pendingBet in pendingBets">
        <td ng-if="hasBetColumn"> {{::pendingBet.BET}}</td>
        <td> {{::pendingBet.CUSTOMER}}</td>
        <td><button class="btn btn-danger">Fill</button></td> <!--{{pendingBet.XX_FILL_OPEN}}-->
      </tr>
    </tbody>
  </table>

如何设置 hasBetColumn 由您决定，无论是在您的 Controller 中还是作为 API 调用返回的数据的一部分。