Question

让我们说我有一个简单的数组对象：

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
        },
    ]
};

然后我会在我的用户界面中显示负载，如下所示：

        <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.我希望这样更新/重新运行我的用户界面。

我确定可以使用observables来完成，但是我错过了什么呢？

Answer 1

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

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

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

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

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

Angluar2 Observable UI - 更新对象阵列中的子项强制更改？

1 个答案: