p-dropdown doesn't show selected value with dynamic options

Question

I have a dynamic form with two interconnected dropdowns. Each option in the first dropdown contains a nested list of options for the second dropdown. However, when the linked dropdown is supposed to have a value, it doesn't appear. I suspect this bug is related to how options are attached after the component is created, but I'm unsure how to fix it. DynamicFieldSelectComponent.ts

export class DynamicFieldSelectComponent implements OnInit, AfterViewInit, OnDestroy {

    @Input() field!: Field;
    @Input() control!: FormControl;
    alive = true;

    constructor(private _messageService: MessageService) {
    }
   ngAfterViewInit(): void {

        if (this.field.value && this.field.provideData) {
            this.field.hidden = false;
            // console.log(`dropdown test ${JSON.stringify({link: this.field.controlName, data: this.field.value.plans})}`);
            this._messageService.message$ = {link: this.field.controlName, data: this.field.value.plans};
        }
        this.listenForLinkData();
    }

    ngOnDestroy(): void {
        this.alive = false;
    }


    onChangedValue(event: DropdownChangeEvent) {
        if (!this.field.provideData) {
            return;
        }
        console.log(`onChange test: ${JSON.stringify(event.value)}`);
        this._messageService.message$ = {link: this.field.controlName, data: event.value.plans};
    }

    listenForLinkData() {
        console.log(`dropdown test method ${this.field.controlName} ${!this.field?.link}`);
        if (!this.field?.link) {
            return;
        }

        this._messageService.message$.pipe(
            filter(v => v?.link === this.field.link),
            takeWhile(() => this.alive)
        ).subscribe((v) => {
            console.log(`dropdown test subcr ${JSON.stringify(v)}`);
            console.log(`dropdown test value ${JSON.stringify(this.field.value)}`);
            this.field.hidden = false;
            this.field.options = v.data;
        });
    }
}

DynamicFieldSelectComponent.html

<div [hidden]="field.hidden === true">
    <div class="field grid p-fluid flex flex-wrap">
        <label [for]="field.controlName" class="col-12 mb-2 md:col-4 md:mb-0 font-bold">{{ field.label }}</label>
        <div class="col-12 md:col-8 flex-auto">
            <p-dropdown
                    [id]="field.controlName"
                    [options]="field.options!" [formControl]="control"
                    [filter]="true"
                    [showClear]="true"
                    [placeholder]="field.label"
                    (onChange)="onChangedValue($event)"
                    filterBy="name"
                    optionLabel="name"
                    styleClass="shadow-1">
            </p-dropdown>
        </div>
    </div>
</div>

Answer 1

Can u bring it on Stackblitz?

It would be much easier to understand what you wanna do.

I hope i understand u right.

My approach: https://stackblitz.com/edit/primeng-dropdown-demo-zlvzcw?file=src%2Fapp%2Fapp.component.ts