Question

我有一个可以添加行的动态表。如何在trpNo不为null时动态隐藏第1栏，第2列，第3列中的垃圾桶按钮，而在trpNo为null时在col4中取消隐藏垃圾桶按钮？

我正在使用一个表单数组来显示数据，并拥有一种在表中动态插入行的方法。我无法控制每一行来隐藏/取消隐藏按钮

过去，我曾尝试将按钮最初设置为在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>

当trpNo不为null时，我希望动态隐藏第1列，第2列，第3列中的垃圾箱按钮？

Answer 1

以这种方式*ngIf="ConnectedASN.trpNo"进行尝试，以防出现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>

如何动态隐藏Angular7 FormArray字段中的按钮？

1 个答案: