html - 添加和更新时如何绑定输入数组复选框

Question

我有一个数组，其中包含创建客户时使用的默认值。默认情况下，所有复选框（50,70,90）将从后端预先选择，但在添加客户时在 UI 上不可见。但是，当您编辑时，它必须显示所有复选框，并且用户可以取消选中（50、70 或 90%）然后更新。

过程：

添加客户时：

1. 创建客户
2. 默认情况下（您将有 3 个复选框）从视图中但隐藏
3. 将选中所有复选框（50,70 和 90%）
4. 用户不会看到复选框，因为它们是隐藏的。
5. 用户只会在编辑时看到复选框。
6. 保存信息

更新：

1. 从视图显示/绑定三个复选框
2. 所有复选框都将被选中，因为在添加时，我们已将它们设置在数组上。
3. 用户可以选择取消勾选（50,70 或 90%）复选框
4. 并使用新的更新复选框选择进行保存。

谢谢你的帮助

ts。我的对象

    public newCustomer: any = {
    cont1: undefined,
    --
    --
    balance: 0.0,
    credit_limit_warning: [
        {
            type: "P",
            warning_threshold: 50,
        },
        {
            type: "P",
            warning_threshold: 70,
        },
        {
            type: "P",
            warning_threshold: 90,
        }
    ]
};

HTML：这是我尝试添加但不工作的内容。

     <div class="row" hidden>
            <div class="col-lg-5 col-md-5 col-12">
                <p class="color-white-60">
                    Notifications<br>
                    <small style="font-size: 12px;">(% of Credit Limit)</small>
                </p>
            </div>

            <div *ngFor="let item of credit_limit_warning; let i = index;" hidden>
                {{i}}
                <span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" formControlName="'creditWarning50 + i'" [(ngModel)]="item.credit_limit_warning"/><label> 50 % </label></span>
                <span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(70, false)" class="checkbox" type="checkbox" [name]="'creditWarning70' + i" [(ngModel)]="item.credit_limit_warning"/><label> 70 % </label></span>
                <span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(90, false)" class="checkbox" type="checkbox" [name]="'creditWarning90' + i" [(ngModel)]="item.credit_limit_warning"/><label> 90 % </label></span>
            </div>
        </div>

HTML 更新：这是更新 html，我不确定如何解决这个问题。

                      <div class="col-lg-4 col-md-4 col-12">
                                <p class="color-white-60">
                                    Contact Number
                                </p>
                                <input [(ngModel)]="customer.cont1" name="contactNumberEdit" placeholder="Contact Number" formControlName="contactNumber" class="form-control" type="text">
                            </div>

                            <div class="row" >
                                <div class="col-lg-5 col-md-5 col-12" >
                                    <p class="color-white-60">
                                        Usage Notifications<br>
                                        <small style="font-size: 12px;">(% of Credit Limit)</small>
                                    </p>
                                </div>
                                <div class="col-lg-7 col-md-7 col-12 mt-10" >
                                    <span style="padding-right: 10px;"> <input name="usageNotification" formControlName="usageNotification" (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" /><label> 50 % </label></span>
                                
                                </div>
                            </div>

标签： htmlarraysangularcheckbox