Angular 2 - 从本地json获取数据以填充下拉列表

Question

我创建了一个Angular 2服务，它使用http读取本地json（稍后可能是休息服务调用）并返回一个Observable。

   @Injectable()
   export class WorkflowDataService {
   constructor(private http: Http) { }
   getProcessTemplates(): Observable<Response> {
       return this.http.get("/assets/jsons/process-templates.json");
   }}

正在阅读的json看起来像这样

{
"process-templates": [
    {
        "name": "ABC",
        "desc": "ABC"
    },
    {
        "name": "XYZ",
        "desc": "XYZ"
    },
    {
        "name": "PQR",
        "desc": "PQR"
    }
 ]
}

我的目标是在下拉列表中显示名称属性的值。因此，下拉列表应该有 - ABC，XYZ，PQR。

所以在我的组件中，我正在调用此服务 -

processTemplates: Observable<Response>; 
ngOnInit( ) {
  this.workflowDataService.getProcessTemplates()
     .subscribe(function(response) {
       this.processTemplates = response.json();
       console.log(this.processTemplates);
     });
}

在console.log中，我看到以下输出

如何以可以在下拉列表中呈现的格式获取输出

<select class="form-control dropdown" (ngModel)="processTemplate" 
                name="processTemplate" id="processTemplate" required>
              <option *ngFor="let processTemplate of processTemplates">
                {{ processTemplate.name }}
              </option>
            </select>

Answer 1

您的JSON包含对象内的数组，因此您需要从对象process-templates中提取数组。做了一些其他更改，而不是使用胖箭头语法而不是function，所以你不要松开上下文this：）

selectedT: any;

getProcessTemplates(): Observable<Response> {
   return this.http.get("/assets/jsons/process-templates.json")
     // extract array from process-templates object
     .map(res => res.json().process-templates) 
}}

然后在您的组件中订阅：

this.workflowDataService.getProcessTemplates()
  .subscribe(data => {
    this.processTemplates = data;
    console.log(this.processTemplates);
  });

至于你的模板，请像John说的那样：

<select [(ngModel)]="selectedTemplate"> 
  <option *ngFor="let processTemplate of processTemplates">{{processTemplate.name}}</option>
</select>

Answer 2

来自类似的问题：Binding select element to object in Angular 2

<select [(ngModel)]="selectedTemplate"> // use banana in a box syntax:[()]
  <option *ngFor="let processTemplate of processTemplates" [ngValue]="processTemplate">{{processTemplate.name}}</option>
</select>

另外。你的init方法中有（this）不同的范围。 Chaning到lambda函数将解决这个问题。如@ AJT_82所述，提取json中的对象

ngOnInit( ) {
  this.workflowDataService.getProcessTemplates()
     .subscribe(response => { //removed function, added =>
       this.processTemplates = response.json().process-templates; //extract json
       console.log(this.processTemplates);
     });
}