p-下拉菜单不显示带有动态选项的选定值

Question

我有一个带有两个互连下拉菜单的动态表单。第一个下拉列表中的每个选项都包含第二个下拉列表中选项的嵌套列表。但是，当链接的下拉列表应该有一个值时，它不会出现。我怀疑这个错误与创建组件后如何附加选项有关，但我不确定如何修复它。 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

你可以把它带到 Stackblitz 上吗？

这样会更容易理解你想做什么。