javascript - 如何使用 NgModel 在 Angular 中默认选中一个复选框？

Question

嗨，我正在尝试默认选中复选框中的第一个值。如何在打开页面时检查并分配它的值？

这是我的 HTML 页面

<fieldset>
            <legend class="text__bold">Choose Screen Size</legend>
            <ng-container *ngFor="let viewport of viewports; let i = index" formArrayName="viewport">
                <input type="checkbox" class="check--box" name="viewport{{i}}" id="{{viewport.value}}"
                    [value]="viewport.value" [formControlName]="i" ng-checked="true">
                <label for="{{viewport.value}}">{{ viewport.value }}</label>
            </ng-container>
        </fieldset>

打字稿文件：

public ngOnInit(): void {
    this.urlForm = this.createForm();
    const checkboxControl = this.urlForm.controls.viewport as FormArray;

    this.subscription = checkboxControl.valueChanges.subscribe(() => {
        checkboxControl.setValue(
            checkboxControl.value.map((value, i) =>
                value ? this.viewports[i].value : ''
            ),
            { emitEvent: false }
        );
    });
}

标签： javascripthtmlcssangulartypescript