使用API调用中的数据在子组件中设置HTML select的默认值

我有一个多组件表单，我想用来自API调用的数据预填充它。除了为

select

标记选择的值之外，每个字段的数据都会正确填充。

值是正确的，只是没有在
选择
中显示正确的
选项
。表单的其余部分由
输入
字段组成，填写正确的数据

子组件接受表单组，这是填充字段的内容

我尝试了
.setValue
，
.patchValue
，
[（ngModel）]
等。我无法正确显示默认值。我做错了什么

子组件.html

<select  [attr.id]="reasonCode"  formControlName="reasonCode" placeholder="Reason Code" style="max-width: 100% !important"
                        no-padding selected>
    <option value="" >Please select reason code</option>
    <option *ngFor="let reasonCode of reasonCodesService.reasonCodes">
                        {{reasonCode}}
                    </option>
</select>

<div *ngFor="let control of newForm.controls['requisitionItem'].controls; let i = index" style="border: 1px solid black; border-radius: 10px; margin-top: 10px;">
    <edit-items (remove)='onRemove($event)'  [newReqForm]="newForm.controls.requisitionItem.controls[i]" style="padding-bottom: 10px"
                    [index]='i'></edit-items>
</div>

父组件.html

<select  [attr.id]="reasonCode"  formControlName="reasonCode" placeholder="Reason Code" style="max-width: 100% !important"
                        no-padding selected>
    <option value="" >Please select reason code</option>
    <option *ngFor="let reasonCode of reasonCodesService.reasonCodes">
                        {{reasonCode}}
                    </option>
</select>

<div *ngFor="let control of newForm.controls['requisitionItem'].controls; let i = index" style="border: 1px solid black; border-radius: 10px; margin-top: 10px;">
    <edit-items (remove)='onRemove($event)'  [newReqForm]="newForm.controls.requisitionItem.controls[i]" style="padding-bottom: 10px"
                    [index]='i'></edit-items>
</div>

编辑
子组件。ts

@Input() newReqForm: FormGroup;

 ngOnInit() {
    this.employeeService.loadEmployees();
    this.reasonCodesService.loadReasonCodes();
    this.itemReqId = +this.route.snapshot.paramMap.get('ReqId');

    this.reqService.getRequisition(this.itemReqId).subscribe(response => {
        this.editReq = response;
        console.log("EDIT REQ VVV");
        console.log(this.editReq);
        this.editRI = this.editReq.requisitionItem;
        this.newForm = this.fb.group({
            employee: [this.editReq.employee, Validators.required],
            job: [this.editReq.job, Validators.compose([Validators.pattern("^[0-9]+$")])],
            requisitionItem: this.fb.array([

            ])
        });
        this.arrayControl = <FormArray>this.newForm.controls['requisitionItem'];
        this.editRI.forEach(item => {
            let newItem = this.fb.group({
                item: [item.item, Validators.required],
                quantity: [item.quantity, Validators.compose([Validators.required, Validators.pattern("^[0-9]+$")])],
                reasonCode: [item.reasonCode],
                operation: [item.operation],

            })

            this.arrayControl.push(newItem);
            this.setValidators()
        });
        for (let i = 0; i < this.arrayControl.length; i++) {
            this.arrayControl.controls[i].get('reasonCode').setValue(this.editRI[i].reasonCode);
        }
        this.setValidators();
        console.log(this.editReq);
        this.newReqForm = this.newForm;
    });
}

isSelected(reasonCode) {
    if (reasonCode == this.rc) {
        return reasonCode
    }        
}

所选选项（）的
所选
上缺少绑定。您可以使用反应式表单设置select的值，但实际上并没有选择选项

换句话说，您需要将类似于
[selected]=“isSelected（reasonCode）”
的内容添加到
选项中：

<option *ngFor="let reasonCode of reasonCodesService.reasonCodes" [selected]="isSelected(reasonCode)">
                    {{reasonCode}}
                </option>


{{reasonCode}}

例如，您可以通过将其参数与从
FormGroup
参考中获得的值进行比较来实现
isSelected
。
reasonCodes
的值是什么？你能把他们的JSON添加到你的问题中吗？@user184994原因码只是一个字符串列表。这对我很有用。我的
isSelected（reasonCode）
现在显示在我的问题中。这就是我需要做的吗？基本上是的。充分披露：我发现被动形式让我自己有点困惑所以可能有更好的解决方案，我不知道。明确绑定
选择的
是我在这种情况下的变通方法。顺便说一句，您的
isSelected
理想情况下应该返回一个布尔值。被动形式确实令人困惑，我感谢您的帮助。但是如果
isSelected
返回一个布尔值，那么它真的会工作吗？我认为我使用的方法会将正确的项替换为函数名。因此，当您选择一个时，它会检查它是否与表单控件匹配，然后返回，为
[selected]
字段提供一个值。i、 e.
[selected]=“缺失的部分”
@Josh试试看！我总是传递一个布尔值，但实际上可能会重载字符串。