Как динамически скрыть кнопку в полях Angular7 FormArray?

Question

У меня есть динамическая таблица, которая может добавлять строки.Как динамически скрыть кнопку корзины в столбце 1, столбце 2, столбце 3, когда значение trpNo не равно нулю, и показать кнопку корзины в столбце столбца 4, когда значение trpNo равно нулю?

Я использую массив форм для отображенияданные и есть метод для динамического вставки строк в таблицу.Я не могу взять под контроль каждую строку, чтобы скрыть / показать кнопку

Раньше я пытался изначально установить кнопку как скрытую в HTML, а затем пытался получить управление из файла .ts (машинопись) но у меня ничего не получилось

<form [formGroup]="Connectedform">
    <table>
        <tr formArrayName="Connectedlst" *ngFor="let ConnectedASN of ConnectedASNlst; let transportNoExist = true;">
            <td>
               <button class="btn btn-sm" type="button" [hidden]="!transportNoExist" >
                   <i class="fa fa-trash"></i>
                </button>
            </td>
            <td class=" form-control-sm">
                <div>
                    TransportNo:<b>{{ConnectedASN.trpNo}}</b>
                </div>
                <div>
                    Supplier:
                    <b>{{ConnectedASN.supplier}}</b>
                </div>
            </td>
        </tr>
    </table>
</form>

Я ожидаю динамически скрыть кнопку корзины в столбцах 1, 2, 3, когда значение trpNo не равно нулю?

Answer 1

попробуйте таким образом *ngIf="ConnectedASN.trpNo" в случае ложного срабатывания кнопка будет скрыта

<form [formGroup]="Connectedform">
    <table>
        <tr formArrayName="Connectedlst" *ngFor="let ConnectedASN of ConnectedASNlst;>
            <td>
               <button class="btn btn-sm" type="button" *ngIf="ConnectedASN.trpNo" >
                   <i class="fa fa-trash"></i>
                </button>
            </td>
            <td class=" form-control-sm">
                <div>
                    TransportNo:<b>{{ConnectedASN.trpNo}}</b>
                </div>
                <div>
                    Supplier:
                    <b>{{ConnectedASN.supplier}}</b>
                </div>
            </td>
        </tr>
    </table>
</form>