如何在 ionViewWillEnter() 上更改角度 8 中复选框的值答案

【问题标题】：How can I change value of checkbox in angular 8 on ionViewWillEnter()如何在 ionViewWillEnter() 上更改角度 8 中复选框的值
【发布时间】：2020-02-05 14:30:12
【问题描述】：

由于我使用的是 ion-router，因此我的输入字段（即复选框）似乎保持其值，因为当我在同一层次结构中导航时组件没有被破坏。每当调用 ngOnDestroy() 并返回视图时，它都会按要求工作，即复选框值设置为默认值。所以我需要一些方法来从输入字段中获取值并将其更改为默认值，即在 ionViewWillEnter() 中为 false，以应对我处于同一导航层次结构的情况。

这是我的 HTML 代码：

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox"/>
</div>

【问题讨论】：

标签： html angular forms checkbox ionic4

【解决方案1】：

您的输入似乎没有使用任何 Angular / Ionic 功能。

我希望看到的是 [ngModel] 或 value 正在设置。

你可以这样做：

// 标记

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox" [ngModel]="yourInputNameHere" />
</div>

那么如果你在后端有一个变量：

let yourInputNameHere: boolean = false;

这可以用来设置ionViewWillEnter()中的值。

【讨论】：

我已经尝试使用您所说的 [ngModel]，但它仍然不会产生影响。我尝试使用普通变量以及 Observable 和 Behavior Subject ，但似乎没有解决我的问题。原因是当组件初始化时，ngModel 值被传递给它并设置值，当用户单击它以选中或取消选中它时，它会保留该值。由于组件没有重新渲染，它保留最后一个值并且不会在 ionViewWillEnter() 上更新。此复选框用于 ngx 引导模型，如果有办法我可以破坏也可以工作的模式。

【解决方案2】：

我解决这个问题的方法是使用 angular 的 @ViewChild() 组件。

HTML 代码：

<div class="d-flex justify-content-between border-bottom p-2">
 <label translate="Test"></label>
 <input class="align-middle" type="checkbox" #checkBox1 />
</div>

组件代码：

@ViewChild("checkBox1", { static: false }) checkBox1: ElementRef;

public ionViewWillEnter() {
 this.checkBox1.nativeElement.checked = false;
}

所以每次使用 ViewChild() 进入视图时，我们可以将元素的检查值设置为 false。

【讨论】：