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

Question

我创建了一个 Angular 2 服务，它使用 http 读取本地 json（以后可能是 rest 服务调用）并返回一个 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);
  });

至于你的模板，照约翰说的做：

<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) 范围。更改为 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);
     });
}