无法在 Angular 中绑定选择选项答案

【问题标题】：Cannot bind Select Options in Angular无法在 Angular 中绑定选择选项
【发布时间】：2020-11-13 13:56:04
【问题描述】：

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

How to load ngOninit after binding the api's?

Component.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>

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

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

【问题讨论】：

我试图用一个简单的 sn-p 重现你的行为，但它对我有用。这是堆栈闪电战：stackblitz.com/edit/angular-ivy-knpkzv?file=src/app/…。您能否分享一个显示不工作行为的堆栈闪电战？ PS：而不是if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) { 说if (this.ruleTypes.some(s => s.ruleTypeName === data.editDataItem.ruleType)) {
嗨 MoxxiManagarm，你能检查一下吗？ stackblitz.com/edit/…, 对 Array、arraytype 等做一点改动。
您在组件 html 第 6 行缺少一个“
您的选择存储值option，但您的表单控件具有string 值。您需要将[value] 标签更改为[value]="option.Name"。见这里：stackblitz.com/edit/angular-ivy-n3xpfx?file=src/app/…
@bahadrdsr，哪一行。？

标签： angular

【解决方案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>

【讨论】：