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

我需要创建一个网页，下拉列表中的值分别为ALL、Test1和test2

现在，如果用户正在选择：

 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>

类型：
{{i}

在这里，getTestcases（）将返回我的所有正确响应

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

打电话，因为这是我第一次和Angular4互动，我完全被卡住了

要想更进一步，需要你的建议

你是说

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

{{i}

是的，我想知道如何传递正确的数据，因为在所有3种情况下，都会有不同的api调用和json结果，例如对于“all”，如何解析getTestcases（）返回的值对于类型（在module.component.ts中）使用ngModel和NgmodelChange，hv创建类似（all，getTestcases（））的密钥对，是吗？是的，你可以为它创建一个接口，如果可能的话，你可以粘贴任何引用或示例代码片段吗