Angular4 选择选项并在 UI 中显示来自 REST 调用的数据答案

【问题标题】：Angular4 select options and show data in UI from REST callsAngular4 选择选项并在 UI 中显示来自 REST 调用的数据
【发布时间】：2018-01-25 10:38:20
【问题描述】：

我需要创建一个网页，其下拉菜单的值分别为 ALL 、 Test1 和 Test 2。

现在如果用户正在选择：

 All ---> localhost:8080/testcases

 Test1 --> localhost:4200/testcases?module=Test1

 Test2 ->localhost:4200/testcases?module=Test2

我在module.component.ts下面创建了：

import { Component, OnInit } from '@angular/core';
import { Testcase } from '../testcase';
import { DataService } from '../data.service';

@Component({
   selector: 'app-module',
   templateUrl: './module.component.html',
   styleUrls: ['./module.component.css']
})
export class ModuleComponent implements OnInit {
testCases: Testcase[];
types= ["ALL", "Test1", "Test2"];

getTestcases() {
  return this.dataService.getTestcases().then(testCases => this.testCases = testCases);
 }

 constructor(private dataService: DataService) {}

 ngOnInit() {

 }

 }

对应的html文件：

   <div> type:
         <select>
               <option *ngFor="let i of type">{{i}}</option>
         </select>
   </div>

在这里，getTestcases() 向我返回了所有正确的响应

localhost:4200/testcases（如果我从相应的测试用例组件调用它），但我不确定在模块组件中如何使用此下拉列表

call，自从我第一次与 Angular4 交互以来，我完全被卡住了，无法

要更进一步，需要您的建议

【问题讨论】：

标签： angular angular5 angular4-router

【解决方案1】：

你是说

 <select>
       <option *ngFor="let i of types">{{i}}</option>
 </select>

【讨论】：

是的，我想知道如何传递正确的数据，因为在所有 3 种情况下，会有不同的 api 调用和 json 结果，例如“ALL”如何解析 getTestcases() 返回的值
使用 ngModel 和 ngModelChange
也用于类型（在module.component.ts中），hv来创建像（ALL，getTestcases（））这样的密钥对，是吗？
是的，您可以为此创建一个界面
如果可能的话，你可以粘贴任何参考或示例代码sn-p