如何将Web API数据绑定到Angular 6中的表单选择选项

Question

My application has a form which has a select option, for the options they need to have the data from a web api. structure is:

result: Array(749)
[0 … 99]
0: "0000105862"
1: "0000105869"
2: "0000105875"
3: "0000110855"
4: "0000110856"
5: "0000110859"
6: "0000111068"
7: "0000111069"
8: "0000111077"
9: "0000112050"
etc

I am trying to bind this into the select option, I am doing this via a service, but the values are not showing up?

html structure:

<select formControlName="sys_id" class="form-select">
    <option *ngFor="let state of sys_id" [ngValue]="state">
    {{ state }}
    </option>
</select>

ts file:

public sys_id = [];

private getSys() {
    this.service.getSys(this.customer_id).subscribe((data) => {
      this.loading = true;
      console.log('Data' + data);
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }

ngOnInit() {
    this.getSys();
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      sys_id: new FormControl(this.sys_id[0], Validators.required),
    });
  }

service.ts

getSys(customerId): Observable<any> {
    return this.http.get<any>(this.sysApiUrl + "?customer_id=" + customerId)
      .pipe(
        catchError(this.handleError)
      );
  }

Answer 1

It looks like your sys_id is an empty array.

I think you need to assign the data in your getSys() method.

 this.service.getSys(this.customer_id).subscribe((data) => {
  this.loading = true;
  console.log('Data' + data);

  for(var i = 0; i < data.length; i++){  // loop through the object array
       this.sys_id.push(data[i]);        // push each element to sys_id
  }

  this.loading = false;
  console.log('Result - ', data);
  console.log('data is received');
})

Answer 2

To answer your question from your comment. Now you dont have to worry about unsubscribing or subscribing. Plus you are using types which is one of the advantages of typescript.

Model.ts

export interface YourData {
name: string;
value: number;
}

component.ts

 your_array: Observable<YourData>

 ngOnInit() {
    this.your_array = yourService.getData()
 }

Service.ts

 return this.http.get<YourData>(this.sysApiUrl + "?customer_id=" + customerId)
  .pipe(
    catchError(this.handleError)
  );

template.html

 <option *ngFor="let state of sys_id | async" [ngValue]="state">