CODEWITHSUNDEEP
typescriptangular2-templateangular-material2
Aniket
Aniket

Reputation: 120

How to loop in dynamic array using ngFor ?

I am trying to bind dynamic array to md-option. But it is throwing error. 

                    <md-select id="hospital0{{index}}" placeholder="Hospital" style="width:100%; " name="hospital">
                      <md-option *ngFor="let hospital of hospitalList{{index}}" [value]="hospital.id">{{ hospital.name }}</md-option>
                    </md-select>

I tried another approach. In that I am fetching the select element and then adding options to it. But it is not adding option inside md-option. This I have tried

    public async GetHospitalForCity(cityId: any) {
console.log(cityId);
let ddl = (<HTMLSelectElement>document.getElementById("hospital000"));
let option = document.createElement("option");
option.value = "1";
option.text = "Hospital1";
ddl.appendChild(option);

}

Upvotes: 1

Views: 8948

Answers (3)

Aniket
Aniket

Reputation: 120

I solved my problem using:

ngFor="let hospital of hospitalList[index]"

as said by Elvynia in comments.

Upvotes: 1

tracer
tracer

Reputation: 442

Though the post is old, I add a similar problem and none of the above solutions solved my problem. But eventually I found out a solution as below.

We can have a function in ts which returns the array on index and bind it in template as below:

HTML:

*ngFor="let hospital of getArray(i+1); let i=index"

ts:

getArray(i: number): any[] {
  if (i === 1) {
     return this.hospital1;
  }else {
     return this.hospital2;
  }
}

Upvotes: 1

Fabio Carpinato
Fabio Carpinato

Reputation: 1181

When the array inside the ngFor is async, you use the async pipe built in angular.

Example

<md-option *ngFor="let hospital of hospitalList{{index}} | async" [value]="hospital.id">
    {{ hospital.name }}
</md-option>

Upvotes: 0

Related Questions