Angular 在使用嵌套json的select元素中使用*ngfor选项

我不知道如何在Angular 2中显示元素内的数据集合

json

[
  {
    "DropdownValues": [
      {
        "ID": 1,
        "Value": "January"
      },
      {
        "ID": 2,
        "Value": "February"
      },
      {
        "ID": 3,
        "Value": "March"
      }
    ],
    "DropDownID": 1,
    "DropDownTitle": "Month",
    "IsMonth": true,
    "IsYear": false,
    "IsCompay": false,
    "IsCompanyName": false
  }

]

调用我的服务时，我能够将其加载到接口中

export interface ITabControls {

 DropdownValues: {
                    DropDownID: number;
                    DropDownMappingID: number;
                    Value: string;
            }
            DropDownID: number;
            DropDownTitle: string;
            IsMonth: boolean;
            IsYear: boolean;
            IsCompay: boolean;
            IsCompanyName: boolean;

        }

选项卡组件.ts

@Component({
    selector: 'tab',
    moduleId: module.id,
    templateUrl: 'tab.component.html'


})
export class TabComponent implements OnInit {

    tabControls: ITabControls[];

    constructor(private _appParams: AppParamasService, private _tabService: TabService) {
   this._appParams.linkNameValue.subscribe(linkName => {this.linkName = linkName;});


    }

    ngOnInit(): void {

        this._tabService.GetControls(1)
            .subscribe(
            data => {
                this.tabControls = data;
            },
            error => this.errorMessage = <any>error);
        console.log('tab Service  ' + this.tabControls);



    }

}

@组件({
选择器：“制表符”，
moduleId:module.id，
templateUrl:'tab.component.html'
})
导出类TabComponent实现OnInit{
tabControls:ItabControl[]；
构造函数（private-appParams:AppParamasService，private-tabService:tabService）{
this._appParams.linkNameValue.subscribe（linkName=>{this.linkName=linkName；}）；
}
ngOnInit（）：void{
此._tabService.GetControls（1）
.订阅(
数据=>{
this.tabControls=数据；
},
error=>this.errorMessage=error）；
log（'tab Service'+this.tabControls）；
}
}

html

<div class="row  left" *ngFor='let control of tabControls'>
    <div class="col-md-3 text-left" style="border:1px dotted">
        {{control.DropDownTitle}}
    </div>
    <div class="col-md-9 text-left">
        <select>
            <option *ngFor='let controlList control.DropdownValues' [value]="controlList.ID">
                {{controlList.Value}}
            </option>
        </select>

    </div>
</div>   

{{control.DropDownTitle}}
{{controlList.Value}

我犯了一个错误

分析器错误：意外标记。在[let controlList]中的第24列 控件中的[DropdownValues]TabComponent@23：44（“外部左侧”>

---

您应该使用ngFor-to-options标记，而不是选择元素

<select>
    <option *ngFor='let controlList of control.DropdownValues' [value]="controlList.ID">
      {{controlList.Value}}
    </option>
</select>

{{controlList.Value}

注意：我不考虑接口ITabControls

在使用接口的情况下，您应该使用与json相同的属性

export interface ITabControls {

        DropdownValues: Array<IDropdownValues>
        DropDownID: number;
        DropDownTitle: string;
        IsMonth: boolean;
        IsYear: boolean;
        IsCompay: boolean;
        IsCompanyName: boolean;


    }

export interface IDropdownValues{

        ID:number;
        Value:string

}

导出接口ITabControls{
下拉值：数组
DropDownID：数字；
下拉标题：字符串；
IsMonth：布尔型；
IsYear：布尔型；
IsCompay：布尔型；
IsCompanyName:boolean；
}
导出接口IDropdownValues{
ID：编号；
值：字符串
}

根据需要修改服务中的GetControls方法

GetControls(): Observable<ITabControls[]> {
        return this._http.get(....)
            .map((response: Response) => <ITabControls[]>response.json())
            .do(data => console.log("data we got is " + JSON.stringify(data)))
                .catch(this.handleError);

    }

GetControls（）：可观察{
返回此。\u http.get（…）
.map（（response:response）=>response.json（））
.do（data=>console.log（“我们得到的数据是”+JSON.stringify（数据）））
.接住（这个.把手错误）；
}

---

您的ngOnInit和选项卡控件保持不变

您应该使用ngFor来标记选项，而不是选择元素

<select>
    <option *ngFor='let controlList of control.DropdownValues' [value]="controlList.ID">
      {{controlList.Value}}
    </option>
</select>

{{controlList.Value}

注意：我不考虑接口ITabControls

在使用接口的情况下，您应该使用与json相同的属性

export interface ITabControls {

        DropdownValues: Array<IDropdownValues>
        DropDownID: number;
        DropDownTitle: string;
        IsMonth: boolean;
        IsYear: boolean;
        IsCompay: boolean;
        IsCompanyName: boolean;


    }

export interface IDropdownValues{

        ID:number;
        Value:string

}

导出接口ITabControls{
下拉值：数组
DropDownID：数字；
下拉标题：字符串；
IsMonth：布尔型；
IsYear：布尔型；
IsCompay：布尔型；
IsCompanyName:boolean；
}
导出接口IDropdownValues{
ID：编号；
值：字符串
}

根据需要修改服务中的GetControls方法

GetControls(): Observable<ITabControls[]> {
        return this._http.get(....)
            .map((response: Response) => <ITabControls[]>response.json())
            .do(data => console.log("data we got is " + JSON.stringify(data)))
                .catch(this.handleError);

    }

GetControls（）：可观察{
返回此。\u http.get（…）
.map（（response:response）=>response.json（））
.do（data=>console.log（“我们得到的数据是”+JSON.stringify（数据）））
.接住（这个.把手错误）；
}

---

您的ngOnInit和选项卡Controls保持不变

请设置您的代码格式。请查看下面的我的答案。使用

让controlList of control.DropdownValues

并查看Aravind的答案请设置您的代码格式。请查看下面的我的答案。使用

让controlList of control.DropdownValues

并查看Aravind'ss回答并在选项标记上修复您的

*ngFor

（是他的代码中的另一个错误）感谢@cyrix的catchhappy帮助您。如果您觉得这有助于解决您的问题，请进行投票，并在选项标记上修复您的

*ngFor

，以添加的

（这是他的代码中的另一个错误）谢谢@cyrix的帮助，我很乐意帮助你。如果你觉得这有助于解决你的问题，请投票