using *ngfor for options in select element using n

问题:

I don't know how to display a collection of data within an element in 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
  }

]

I was able to load it into an interface when calling my service

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>   

I get an error

Parser Error: Unexpected token . at column 24 in [let controlList control.DropdownValues] in TabComponent@23:44 ("ext-left">

回答1:

You should be using ngFor to options tag and not to the select element

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

Note: I am not considering the Interface ITabControls.

In case you are using interface you should be using the same properties as that of your json as

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

}

modify your GetControls method in your service as

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);

    }

Your ngOnInit and the tabControls remains the same