如何在 Angular 的 Typescript 中使用数组

Posted 2023-02-27

【中文标题】如何在 Angular 的 Typescript 中使用数组

【英文标题】：How to use Arrays in Typescript in Angular

【发布时间】：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>

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

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

【参考方案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