当我关闭对话框时复选框未选中 - 角度答案

【问题标题】：checkbox gets unchecked when I close dialog box - angular当我关闭对话框时复选框未选中 - 角度
【发布时间】：2019-11-10 13:54:11
【问题描述】：

我有一个Mat Table，它有一个操作列。操作列是一个打开dialog box 的按钮。

STACKBLITZ

在dialog box 内，我有另一个带有checkbox 的表。当我进行选择时（即将一行标记为checked）并关闭dialog box，当我返回同一行时，选择就消失了。它被重置。如何预防？

我创建了一个 stackblitz 示例来尝试此操作。

【问题讨论】：

因为OlsComponent 知道通过selection 检查哪些项目。当对话框关闭时，组件连同其所有数据一起被销毁。当您重新打开对话框时，会创建一个新实例。所以你之前的选择通常会丢失。您可以做的是以某种方式存储选择信息，并在打开对话框时重新初始化您的选择模型。
^^ 他是正确的，一个模态总是应该被破坏并创建一个新的，如果你想看到它像这样检查它，你应该将数据传递给他的模态stackblitz.com/angular/…
array resets back mat checkbox - angular的可能重复
为什么同一个问题问了两次？答案已经在这里：stackoverflow.com/a/56809957/9226213

标签： angular angular-material

【解决方案1】：

我认为您的数据结构不适合您要实现的目标。这是您的数据行：

{ role: 'role1', ols: ['ols1', 'ols2'] },

你怎么知道哪个ols被选中，哪个没有被选中？

我会将您的数据结构更改为这样的：

{
    role: 'role1', ols: [
        {
            name: 'ols1',
            selected: false
        },
        {
            name: 'ols2',
            selected: false
        }
    ]
}

并将mat-checkbox 的绑定更改为ngModel，因此这是两种方式并删除其他所有内容：

<mat-checkbox
   [(ngModel)]="row.selected">
</mat-checkbox>

看看this StackBlitz 插图。

【讨论】：