Показать кнопку в таблице на основе других ячеек

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]) .Цель состоит в том, чтобы нажать кнопку и обновить имя.

Я могу показать ДА или НЕТ в зависимости от первого столбца, но отображение кнопки просто не хочет работать.Как вы можете видеть в коде, который я прокомментировал, я не нашел хорошего решения.

Следующая строка <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>

добавить [hidden] { display: none !important;} в css