How to loop in dynamic array using ngFor ?

Question

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);

}

Cannot read property 'toUpperCase' of undefined ("" placeholder="Hospital" style="width:100%; " name="hospital"> <md-option [ERROR ->]*ngFor="let hospital of hospitalList{{index}}" [value]="hospital.id">{{ hospital.name }}</md-option> "): ng:///AppModule/MrWeeklyPlanComponent.html@97:37 Parser Error: Unexpected token {, expected identifier, keyword, or string at column 29 in [let hospital of hospitalList{{index}}] in ng:///AppModule/MrWeeklyPlanComponent.html@97:37 ("ame="hospital"> — Aniket
– Aniket, Commented Nov 6, 2017 at 15:13
I don't think you should use something like hospitalList{{index}}, because the template expression (with {{}}) will never be parsed. Instead you should use this property inside your component : hospitalList: Array<any[]>, then you can use *ngFor="let hospital of hospitalList[index]" in your template. — Elvynia
– Elvynia, Commented Nov 7, 2017 at 10:12

tracer · Accepted Answer · 2019-04-03 07:13:05Z

1

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;
  }
}

answered Apr 3, 2019 at 7:13

tracer

4422 gold badges7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

double-beep · Accepted Answer · 2019-05-02 08:10:24Z

1

I solved my problem using:

ngFor="let hospital of hospitalList[index]"

as said by Elvynia in comments.

edited May 2, 2019 at 8:10

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Dec 16, 2017 at 16:10

Aniket

1201 silver badge12 bronze badges

Comments

vfioox · Accepted Answer · 2017-11-06 15:21:20Z

0

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>

edited Nov 6, 2017 at 15:21

vfioox

7381 gold badge8 silver badges22 bronze badges

answered Nov 6, 2017 at 15:02

Fabio Carpinato

1,1817 silver badges14 bronze badges

3 Comments

Fabio Carpinato Over a year ago

i added the example, you have to use the async pipe as i showed to get it working.

Aniket Over a year ago

Cannot read property 'toUpperCase' of undefined ("" placeholder="Hospital" style="width:100%; " name="hospital"> <md-option [ERROR ->]*ngFor="let hospital of hospitalList{{index}} | async" [value]="hospital.id">{{ hospital.name }}</md-"): ng:///AppModule/MrWeeklyPlanComponent.html@97:37 Parser Error: Unexpected token {, expected identifier, keyword, or string at column 29 in [let hospital of hospitalList{{index}} | async] in ng:///AppModule/MrWeeklyPlanComponent.html@97:37 ("pital">

Aniket Over a year ago

It is not parsing the placeholder braces {{ }}

Collectives™ on Stack Overflow

How to loop in dynamic array using ngFor ?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related