如何在 Angular 的 Typescript 中使用数组答案

【问题标题】：How to use Arrays in Typescript in Angular如何在 Angular 的 Typescript 中使用数组
【发布时间】：2020-11-08 18:37:49
【问题描述】：

我编写了一个 Rest API，它返回一组数据，这些数据用于填充表单的 2 个下拉菜单。从 API 返回的数据是从 Angular 后端接收并绑定的到下拉菜单。我没有编写 2 个 Get 请求来获取 2 个表单的数据，而是尝试在一个 Get 中获取这些数据。

Java 后端 Get 方法

 @GetMapping("/flight/formdata")
    public List getWebSiteFormData() {

        List formDataSet=FligthtDataServices.getWebSiteFormData();
        return formDataSet;
    }

Postman 上显示的数据集

[
    [
        "London Heathrow",
        "AP"
    ],
    [
        "Velana International Airport",
        "AP"
    ],
    [
        "Hamad International Airport",
        "AP"
    ],
    [
        "Suvarnabhumi Airport",
        "AP"
    ],
    [
        "Changi Airport",
        "AP"
    ],
    [
        "Business",
        "CL"
    ],
    [
        "Premium Economy",
        "CL"
    ],
    [
        "Economy",
        "CL"
    ]
]

服务类

  getWebSiteFormData():Observable<any>{
    return this.http.get(`${this.baseUrl}/formdata`);
  }

我的方法是，具有值“AP”的数据数组应该绑定到 Departure Airports 下拉列表，并且具有“CL”的数组应该显示在 Class Drop-down 中。所以我所做的是基于我试图划分该数据的这两个标识符分成 2 个数组 fromairportlist=[]; , flightclass=[];

预订组件

export class BookingComponent implements OnInit {
  
  public websiteformdata=[];
  public flightclass=[];
  public fromairportlist=[];

  constructor(private flightService:FlightService, private router: Router) { }
  
  ngOnInit(): void {
  this.loadFormData();
  }

  loadFormData(){
    this.flightService.getWebSiteFormData().subscribe(data=>this.websiteformdata=data,error=>console.error(error)) 
   
   for (let item of this.websiteformdata) {
     if(item[1]=='AP'){
       this.fromairportlist.push(item[0]);
     }   
   } 
   console.log(this.fromairportlist)
  }
}

Booking.component.html 文件

 <td style="height: 39px; width: 14%;"> 
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Departure</div>
        </div>
       <select class="form-control" id="classtype" name="classtype" [(ngModel)]="booking.classtype">
        <option>{{fromairportlist[0]}}</option>
        <option>{{fromairportlist[1]}}</option>
        <option>{{fromairportlist[2]}}</option>
       </select>
       </div>
    </td>

但它似乎没有工作如图所示的下拉菜单中没有显示任何内容

如果我的方法有误，请提出纠正方法。

【问题讨论】：

标签： angular typescript spring-boot

【解决方案1】：

第一次使用*ngFor:<option *ngFor="let option of fromairportlist">{{ option }}</option>

这可能会有所帮助 Angular 4 setting selected option in Dropdown

【讨论】：

【解决方案2】：

由于您的结果是一个字符串数组，因此通过 for 循环对其进行循环。很简单，

<select>
  <option *ngFor="let item of fromairportlist">{{item}}</option>
</select>

如果有任何疑问，请参阅您的参考的 stackblitz 解决方案。 https://stackblitz.com/edit/angular-m2kfec

【讨论】：