Question

我在component.ts中有一个FormArray函数，该函数生成控件。我不知道如何使用下拉式onchange从component.html调用component.ts中的函数

我在component.ts，components.html中写过函数

component.ts

addSubmenugroup(j) {
      console.log(j);
      const control = < FormArray > this.form.get('submenus')['controls'][j].get('submenugroups');
      control.push(this.initSubmenugroup());
  }

  getSubmenugroups(submenuform) {
      return submenuform.controls.submenugroups.controls;
  }

  initSubmenugroup() {
      return new FormGroup({
          submenuOption: new FormControl(''),
          submenuTake: new FormControl('', Validators.required),
      });
  }

component.html

<select class="form-control select2" formControlName="submenuReplyType" type="text" style="width: 100%;" [(ngModel)]="optionsubValue">
    <option value="predefinedsub">Pre-Defined</option>
    <option value="opentypesub">OpenType</option>

</select>

<div class="col-md-12 no-padding" *ngIf="optionsubValue == 'opentypesub'">
    <label>Take him to Menu</label>
    <select class="form-control" formControlName="type" type="text">
        <option value="menu1">Menu 1</option>
        <option value="menu2">Menu 2</option>
    </select>
</div>

Onchange，如果值为OpenType

<div class="col-md-12 no-padding" *ngIf="optionsubValue == 'opentypesub'">
    <label>Take him to Menu</label>
    <select class="form-control" formControlName="type" type="text">
        <option value="menu1">Menu 1</option>
        <option value="menu2">Menu 2</option>
    </select>
</div>

应该是可见的，否则，如果值是Pre-Defined，则应从component.html中调用函数addSubmenu。

我如何做到这一点？

预先感谢

Answer 1

我从您的问题中了解到，您想在下拉更改事件中调用方法。您可以在Select标签的change事件上调用方法，如下所示：

   Component.html
  <select (change)="callyourfunction($event.target.value)" class="form-control" 
  formControlName="type" type="text">
  <option value="menu1">Menu 1</option>
  <option value="menu2">Menu 2</option>
  </select> 

component.ts
   callyourfunction(val: any) {
    if (val == "Menu1")
        {
     }
    else if(val == "Menu2"){

   }
 }

Answer 2

<div class="col-md-12 no-padding" *ngIf="optionsubValue == 'opentypesub'">
  <label>Take him to Menu</label>
    <select class="form-control" formControlName="type" type="text">
      <option *ngFor="let each of [yourListResponse];let i=index" value="menu1">{{each.menu1}}</option>
    </select>                                         
</div>

[yourListResponse]是从后端或任何地方获取的数组 {{each.menu1}}是包含列表的响应之一

Angular-FormArray中的Dropdownlist onchange来调用函数

2 个答案: