Angular5 在点击时获取输入值

Question

我有一个表单，如果选中复选框，我希望使用isChecked函数提交值。但我无法让它工作。我试过了 isChecked({{user.username}}) 但这行不通。知道吗？

<form #a="ngForm" (ngSubmit)="addGamers(a)">
      <ul class="list-group gamer-list">
            <li class="list-group-item agamer" *ngFor="let user of allUsers$ | async as users; index as i">
                <div class="material-switch">
                    <input id="switch{{user.username}}" value="switch{{user.username}}" name="switchUsername" (click)="isChecked()" type="checkbox"/>
                    <label for="switch{{user.username}}" class="switch{{user.key}}"></label>
                </div>
                {{user.username}} {{ i }}
            </li>
    </ul>

Answer 1

当你在 (( 中提供 attrs 时，你可以像

<input id="switch{{user.username}}" value="switch{{user.username}}" name="switchUsername" (click)="isChecked(user.username)" type="checkbox"/>

在您的组件中，您可以直接访问该函数：

isChecked(userName) { 
   if (userName != null) {
      // your implementation
   }
}

如果你想让它在提交，那么你可以在 Angular2+ 中使用双向绑定的强大功能

在您的组件中：

public isChecked: boolean = false;

在 HTML 中：

<input id="switch{{user.username}}" value="switch{{user.username}}" name="switchUsername" [(ngModel)]="isChecked" type="checkbox"/>