angular - การตั้งค่าค่ามาตรฐานของ HTML select ในคอมโพเนนต์ลูกด้วยข้อมูลจากการเรียก API

ฉันมีแบบฟอร์มที่มีหลายส่วนประกอบซึ่งฉันต้องการกรอกข้อมูลล่วงหน้าจากการเรียก API ข้อมูลถูกเติมอย่างถูกต้องสำหรับทุกฟิลด์ ยกเว้นค่าที่ถูกเลือกสำหรับแท็ก select value ถูกต้อง แต่ไม่ได้แสดง option ที่ถูกต้องภายใน select ส่วนที่เหลือของแบบฟอร์มที่ทำจากฟิลด์ input ถูกกรอกด้วยข้อมูลที่ถูกต้อง

คอมโพเนนต์ลูกจะรับกลุ่มฟอร์มเข้าไป และนั่นคือสิ่งที่กรอกข้อมูลในฟิลด์ต่างๆ

ฉันได้ลองใช้ .setValue, .patchValue, [(ngModel)] เป็นต้นแล้ว แต่ฉันไม่สามารถทำให้ค่าดีฟอลต์แสดงผลได้อย่างถูกต้อง ฉันทำอะไรผิดหรือเปล่า?

child-component.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>

child-component.ts

@Input() newReqForm: FormGroup;

ส่วนประกอบหลักของพ่อแม่.html

<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

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

ข้อมูล Node/Angular ของฉัน:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64

แก้ไข child-component.ts

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

คำตอบ #1

คุณกำลังขาดการผูกค่าที่ selected ของตัวเลือกที่ถูกเลือก (ดูที่นี่) คุณสามารถตั้งค่าของ select โดยใช้ reactive forms แต่สิ่งนี้ไม่ได้เลือกตัวเลือกจริง ๆ

พูดอีกอย่างก็คือ คุณจำเป็นต้องเพิ่มบางอย่างเช่น [selected]="isSelected(reasonCode)" ไปยัง option:

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

คุณสามารถใช้งาน isSelected ได้ เช่น โดยการเปรียบเทียบพารามิเตอร์ของมันกับค่าที่ได้จากการอ้างอิง FormGroup