无法在 Angular 中绑定选择选项

Question

我正在尝试将此数据绑定到 DropDown 或 Select 选项。 该值未绑定到表单控制器。 这个问题是：

绑定api后如何加载ngOninit？

组件.html

 <div class="col-md-6">
     <label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
        <div class="col-md-12">
            <select class="form-control" formControlName="ruleTypeName">
                <option [ngValue]="null" disabled>Choose your Rule Types</option>
                 option *ngFor="let rule of ruleTypes" [value]="rule">  {{ rule.ruleTypeName }}</option>
            </select>
        </div>
</div>  

组件.ts

   public ngOnInit(): void {    

 if(this.data.isNew === true) {
            this.editForm =   this.formBuilder.group({
                    id              : new FormControl(),
                    name            : new FormControl('', Validators.required),
                    description     : new FormControl(''),
                    libraryFile     : new FormControl(''),       
                    className       : new FormControl(''),
                    ruleTypeName    : new FormControl(''),
                    groupTypeName   : new FormControl('')
                });
            } else {
                this.editForm =   this.formBuilder.group({
                    name            : new FormControl(this.data.editDataItem.name, Validators.required),
                    description     : new FormControl(this.data.editDataItem.description),
                    libraryFile     : new FormControl(this.data.editDataItem.libraryFile),       
                    className       : new FormControl(this.data.editDataItem.className),
                    ruleTypeName    : new FormControl(this.data.editDataItem.ruleTypeName),
                    groupTypeName   : new FormControl(this.data.editDataItem.groupTypeName)
                });
            }
    this.ruleTypeName=this.getRuleTypes(this.data);


   }

public getRuleTypes(data:any): any{
        this.ruleService.readRuleTypes().subscribe((res:any)=>{
            this.ruleTypes=res;
            console.log(this.ruleTypes);
            if(data.isNew === true){
                this.ruleTypeName = null;
            }  else {
                if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) {
                    this.ruleTypeName = this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)];
                   // this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);
                }
            }  
            this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);               
        });
        
    }

不知道我在这里遗漏了什么......请帮助提供相关数据。

Answer 1

您需要更改模板中的 value 属性。

<div class="col-md-6">
     <label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
        <div class="col-md-12">
            <select class="form-control" formControlName="ruleTypeName">
                <option [ngValue]="null" disabled>Choose your Rule Types</option>
                 <option *ngFor="let rule of ruleTypes" [value]="rule.ruleTypeName">  {{ rule.ruleTypeName }}</option>
            </select>
        </div>
</div>