Question

我用* ngFor读出了一组用户对象。我想使用“删除”复选框删除对象并设置按钮（表中每行旁边）。如何将复选框的状态传递给setUser函数。

<ion-row class="userList" *ngFor="let user of users">
    <ion-col col-5 class="userName">
        {{user.firstname}} {{user.lastname}}
    </ion-col>
    <ion-col>
        <ion-checkbox></ion-checkbox> <span>Remove</span>
    </ion-col>
    <ion-col>
        <!--How can I read out the value of the checkbox above-->
        <button ion-button color="primary" (click)="setUser(user._id,???)">Set</button>
    </ion-col>
</ion-row>

Answer 1

您需要在用户对象中包含一个布尔变量，以绑定用户的状态。说积极的。

<ion-checkbox [(ngModel)]="user.Active"></ion-checkbox>

然后您可以在setUser函数中传递或使用Active变量，

<button ion-button color="primary" (click)="setUser(user._id,user.Active)">Set</button>

Answer 2

尝试一下。

在此示例中，设置复选框“ userCheckbox”的模板引用变量。

<ion-checkbox #userCheckbox></ion-checkbox>

然后传递复选框值的变量，它将为true / false。

<button ion-button color="primary" (click)="setUser(user._id,userCheckbox.value)">Set</button>

Answer 3

如果您根本不想使用[(ngModel)]：

创建一个说checkedUsers（大小等于用户数）的数组，并将其初始化为false

<ion-row class="userList" *ngFor="let user of users; let i = index"> // add index)

<ion-checkbox [checked]="checkedUsers[index]"></ion-checkbox> //或[值]

(click)="setUser(user._id, index)"

setUser(userid, index){
   this.checkedUsers[index] = true;
}

这种方法不是推荐的方法，您可以继续使用Sajeetharan方法

在（click）事件中使用局部变量，而没有两种方式的绑定

3 个答案: