javascript - 复选框值不会在 Angular 中从一个组件保留到另一个组件

Question

我创造了一个手风琴。在其中，我有一个名为 filter-list 的组件。当我单击标题切换复选框时，它正在切换该组件。但是，它不保留复选框的值。例如，如果我有 5 个复选框并且我只选择了两个然后切换它，它不会保留复选框的值。这是示例代码

应用程序-root.html

enter code here
<h5 (click)="toggle()">Toggle checkboxes</h5>
<app-filter-list *ngIf="isShow"></app-filter-list>

应用程序根.ts

isShow: boolean = false;
toggle(){
    this.isShow = !this.isShow;
}

应用过滤器列表.ts

selectDates = [
    { date: "10/08/2020", isChecked: true },
    { date: "30/04/2020", isChecked: true },
    { date: "12/12/2020", isChecked: true },
    { date: "01/03/2020", isChecked: true },
    { date: "02/02/2020", isChecked: true }
]


getDates(index: number){
    this.selectDates[index].isChecked = !this.selectDates[index].isChecked;     
   // this should retain the values of checkboxes
}

应用过滤器列表.html

<div *ngFor="let date of selectDates; let i = index">
    <input type="checkbox" value="{{ date.date }}" (change)="getDates(i)" 
    [checked]="date.isChecked"> {{ date.isChecked }}
</div>

我试过这种方式，但没有运气。

此外，我还尝试使用 @Output() 装饰器，但它仍然没有保留这些值。

任何帮助，将不胜感激。#Angular #javascript #html #ts

标签： javascripthtmlangulartypescript