Question

我正在动态创建服务的下拉列表。

我需要帮助来获取值并将其传递给服务，并需要帮助来捕获所选内容，例如： 2月来自月份下拉列表， 2017 来自年份下拉列表。

tab.component.service，GetDropdownControls将返回此标签需要多少下拉列表以及标签。例如：

GetDropdownControls（这就是我现在拥有的）

{"result":[
   {
     "DropDownID":1,
     "DropDownTitle":"Month"

   },
   {
     "DropDownID":2,
     "DropDownTitle":"Year"
   }
 ]
}

输出将是：

月：下拉

年份：下拉

这是需要的（一个控件看起来像这样。注意：我的子数组可能格式不正确）：

controls = {
  DropDownID":1,
  DropDownTitle":Month
  selectArray: [ // stuff that would be placed in the select
   {
     ID: 1,
     value: January,
     ID: 2,
     value: feb,
     ID: 3,
     value: March,
     ID: 4,
     value: April,
     etc...


   }  
  ] 
}

GetDropdownControlValues方法将返回dropwdown的值，例如： if＆＃34; DropDownID＆＃34;：1传递给此方法，将获得它们将绑定到的1月，2月，3月，4月等（月份的下拉列表）

tab.component

export class TabComponent implements OnInit {
    @Input() tabTitle: string;

    tabControls: ITabControls[];
    tabControlValues: ITabControlValues[];


    getDropdownControlValues(drodownID: number) {
        this._tabService.GetrodownControlValues(drodownID)
            .subscribe(
            data => {
                this.tabControlValues = data.result
            },
            error => this.errorMessage = <any>error);

    }
    ngOnInit(): void {

        this._tabService.GetControls(1)
            .subscribe(
            data => {
                this.tabControls = data.result
    //need to call getDropdownControlValues for every DropdownID
            },
            error => this.errorMessage = <any>error);
        console.log('tab Service  ' + this.tabControls);


    }

}

tab.ts

export interface ITabdrodownControls {
    DropDownID: number;
    DropDownTitle: string;

}

export interface ITabControlValues {

    ID: number;
    Value: string;



}

tab.component.html，我无法将ngD中的DropDownID传递给＆＃34;选项＆＃34; 。一旦DropDownID被传递，我需要返回tab.component来调用一个服务（GetDropdownControlValues），它将返回id和要绑定的文本以及一个change事件来捕获选择了什么dropwdown的id？

 <div class="row  left" *ngFor='let controls of tabControls'>
     <div class="col-md-3 text-left" style="border:1px dotted">
         {{controls.DropDownTitle}}
     </div>
     <div class="col-md-9 text-left">
         <select>
             <option //need to pass control.DropDownID and ngfor to bind the values></option>
         </select>
    </div>
</div>

当前输出：

Angular 2从ngFor传递id到控件

0 个答案: