angular - API调用后Angular组件不更新

Question

我有一个下拉组件，它将模型作为[输入]。

在父母我有：

    public ngOnInit(): void {

        this.initializeDropdown();       
    }

private initializeDropdown(): void {

    this.viewModel.dropdownItems = {
        defaultItem: {
            display: 
            value: undefined
        },
        items: []
    };

    const promise = this.someService.get("SOMEURL");

    promise.then(res => {
        if (Array.isArray(res)) {

            res.map((item) => {

                this.viewModel.dropdownItems.items.push(
                    {
                        display: item.display,
                        value: item.value
                    });
                }
            );
        }
    });
}

问题是不更新子组件。所以下拉列表不会更新。我可以看到 viewModel 已初始化。

我已经用一种方式绑定了它 [ this.viewModel.dropdownItems ]

我也在其他地方使用这个下拉组件，所以我知道它可以工作。（不知道api调用虽然不知道我是否在其他地方这样做）

Answer 1

如果您正在使用changeDetection: ChangeDetectionStrategy.OnPush，请按如下方式保留ChangeDetectorRef并调用。markForCheck

 constructor(private changeDetectorRef: ChangeDetectorRef) {}

 const promise = this.someService.get("SOMEURL");
    promise.then(res => {
        if (Array.isArray(res)) {

            res.map((item) => {

                this.viewModel.dropdownItems.items.push(
                    {
                        display: item.display,
                        value: item.value
                    });
                });
            this.changeDetectorRef.markForCheck();
        }
    });