Angular 2 Nested *ngFor

Question

I am currently trying to pass some indexes to a function but the first parameter (ii) returns undefined.

<div *ngFor="let tab of screen.data.tabs; let index = i;">
    <div *ngIf="tab.active">
        <div *ngIf="tab.questions">
            <div *ngFor="let question of tab.questions; let index = ii;">
                <div class="scenarioContainerQUESTION">
                    <p [innerHtml]="question.text"></p>
                    <div *ngFor="let option of question.options; let iii = index;" class="option" [ngClass]="{'optionSelected': option.selected}">
                        <label [for]="ii+'_'+iii">{{option.text}}</label>
                        <input [id]="ii+'_'+iii" [name]="'group'+ii" type="radio" [value]="ii" (click)="optionClicked(ii,iii)" />
                    </div>
                    <button [ngClass]="{'fade': selectedOption == -1}" (click)="ManageSubmit()">SUBMIT</button>
                </div>
            </div>
        </div>
    </div>
</div>

Try let i = index and let ii = index (only let iii = index is OK). — Martin Parenteau
– Martin Parenteau, Commented May 3, 2018 at 2:13

Sajeetharan · Accepted Answer · 2018-05-03 02:15:25Z

1

You should assign index value to the variables not the otherway,

<div *ngFor="let tab of screen.data.tabs; let i= index;">

also

<div *ngFor="let question of tab.questions; let ii= index;">

answered May 3, 2018 at 2:15

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Dylan Anlezark Over a year ago

i Knew it would be something tiny haha thanks everyone for the quick resonse.

Michael Kang · Accepted Answer · 2018-05-03 02:16:56Z

0

Check out the docs for ngFor. The correct syntax for binding to index:

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

answered May 3, 2018 at 2:16

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Collectives™ on Stack Overflow

Angular 2 Nested *ngFor

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related