javascript - 根据其他单元格在表格中显示按钮

Question

我有以下代码

<tbody *ngIf="packages">
              <tr *ngFor="let package of packages">
                <td class='checkbox'>
                  <label class="css-control css-control-primary css-checkbox table-select">
                    <input type="checkbox" class="css-control-input" (click)="selectPackage(package.name)"
                      [checked]="isSelected(package.name)">
                    <span class="css-control-indicator"></span>
                  </label>
                </td>
                <td> {{package.name}}</td>
                <td> {{package.version}}</td>
                <td> {{getNewMajorVersion(package.version)}}</td>
 <!-- <td (click)="createNewMajorVersion(package.name, package.version)"><i class="fa fa-plus-square"
                    aria-hidden="true"></i></td> -->
 <!-- <td><button ng-show = "{{(package.name).includes('_v')">UPGRADE</button></td> -->
      <td> {{(package.name).includes('_v') ? 'YES' : 'NO'}}</td>
     </tr>
</tbody>

根据我的第一列 package.name，我想在最后一列中显示一个按钮。该名称必须包含版本号 (_v[0-9])。目的是点击按钮，升级名称。

我可以根据第一列显示"is"或“否”，但显示按钮根本不起作用。就像你在我注释掉的代码中看到的那样，我没有找到好的解决方案。

下一行<td><button ng-show = "{{(package.name).includes('_v')">UPGRADE</button></td>还在每一行显示按钮，而不仅仅是在他找到 "_v" 的地方？

有什么想法吗？

Answer 1

代替 ng-show 使用 [style.display]

<td><button [style.display] = "package.name.includes('_v') ? 'block' : 'none'" >UPGRADE</button></td>

或者你可以试试[隐藏]

<td><button [hidden] = "!package.name.includes('_v')" >UPGRADE</button></td>

在 css 中添加 [hidden] { display: none !important;}