Угловой компонент не обновляется после вызова API

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();
        }
    });