使用 *ngfor 作为使用嵌套 json 的 select 元素中的选项

Question

我不知道如何在 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);



    }

}

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>   

我收到一个错误

解析器错误：意外的标记。TabComponent@23:44 中 [let controlList control.DropdownValues] 的第 24 列（“ext-left">

Answer 1

您应该将 ngFor 用于选项标签而不是选择元素

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

注意：我没有考虑接口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

}

将服务中的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);

    }

您的ngOnInit和tabControls保持不变