* ngforネストされたJSON

Question

を使用してselect要素のオプションのために私は要素内のデータの収集を表示する方法がわからない

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> 

私はあなたがしていないselect要素にオプションタグに

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

注意をngForを使用する必要があります

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

Answer 1

エラーが出ます：私は考えていないのですインターフェイスITabControls。あなたは

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 

} 

として、あなたのJSONのと同じプロパティを使用してしなければならないインタフェースを使用している場合は

は

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を変更ngOnInitおよびtabControlsは同じままです