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;

        }

tab.component.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>

我收到错误

分析程序错误：意外的令牌。在第24页的[let controlList tabComponent @ 23:44中的control.DropdownValues]（“ext-left”＆gt;

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 保持不变

使用嵌套json

1 个答案: