将复选框 angular 与输入绑定

Question

使用英雄之旅作为参考，我正在尝试修改我想做的事情。

当页面加载时，我将有多种选择供用户决定使用哪个项目。

我希望取消select复选框，除非列表项是selected。两个问题是复选框不显示，除非我 select 一个项目，select 一个项目不选中该框。只是让它出现。 Image of two boxes selecting input 下面的示例代码。 HTML代码

<div class="card-box">
                        <div class="card-row">
                            <div class="col-md-12">
                                <h3>Duns Number <span class="float-right" *ngIf="selectedHero">
                                        <input #selectedHero id="selectedHero" type="checkbox" [checked]="selectedHeroBox"
                                            (change)="onselectedHero(selectedHero.checked)" type="checkbox">
                                    </span>
                                </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p class="greyColor">numeric field</p>
                            </div>
                        </div>
                        <div class="row padTop30">
                            <div class="col-md-12 selItem" style="cursor: pointer;">
                                <ul class="heroes">
                                    <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero"
                                        (click)="onSelect(hero)">{{hero.name}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

组件

heroes = HEROES;
selectedHero: Hero;
selectedHeroBox: boolean;

onSelect(hero: Hero): void {
    this.selectedHero = hero;
}
public onselectedHero(value: boolean) {
    this.selectedHeroBox = value;
}

Answer 1

我不确定我是否理解了这个问题，但这就是您要找的吗？ https://stackblitz.com/edit/angular-ojqlrf

将复选框 angular 与输入绑定

Bind checkbox angular with input

data-binding

checkbox

2-way-object-databinding

angular