Angluar2 Observable UI - 更新对象数组中的子项强制更改？答案

【问题标题】：Angluar2 Observable UI - Update Children in Object Array force Change?Angluar2 Observable UI - 更新对象数组中的子项强制更改？
【发布时间】：2017-04-13 16:41:30
【问题描述】：

假设我有一个像这样的简单数组对象：

validationMessages = {
    'name': [{
        'type': 'required',
        'message': 'Name is required.',
        'enabled': 1
    },
    {
        'type': 'maxlength',
        'message': 'Name cannot be more than 50 characters long.',
        'enabled': 0
        }],
    'description': [
        {
            'type': 'required',
            'message': 'Description is required.',
            'enabled': 0
        },
    ]
};

然后我会像这样在我的 UI 中显示加载时：

        <div *ngFor="let err of validationMessages.name">

            <div *ngIf="err.enabled == 1"  class="alert alert-danger">


                {{err.message}}
            </div>
        </div>

工作正常。

但是我想做的是能够更新 validationMessages.name 数组以更新给定对象以标记 enabled 1 或 0。然后我希望它能够更新/重新运行我的 UI。

我确信这可以使用 observables 来完成，但是我缺少什么来做到这一点？

【问题讨论】：

标签： angular observable

【解决方案1】：

如果您不在某个事件（按钮单击、值更改）或异步调用中修改对象，则必须告诉 Angular 您希望刷新组件。

controller(private changeDetectorRef: ChangeDetectorRef) {}
changeValidationMessages(): void {
   this.validationMessages...enabled = 0;
   this.changeDetectorRef.markForCheck();
}

没有必要为此使用 Observables，但如果你这样做了，你可能会使用 async 管道来显示消息。管道自己调用ChangeDetectorRef。

确保模型更改反映在 UI 中的另一种方法是使用不可变对象（只要您想修改现有对象，就创建一个新的对象副本），但这也增加了一些复杂性。

Angular 的变更检测系统是一个值得详细了解的话题。您可以查看以下文章：

【讨论】：