Angular - 如何在 NgFor 中创建动态模板变量

Question

Can someone help me how to create dynamic template reference variable inside ngFor, below is my code

Here I wanted to use [matAutocomplete]="auto" with mat-autocomplete #auto="matAutocomplete" dynamically based on my ngFor

    <div class="col" *ngFor="let item of formItems;">
        <mat-form-field>
            <input type="text" placeholder="{{item.label}}" aria-label="Number" matInput
                   formControlName={{item.type}} [matAutocomplete]="auto" id="item.type">
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)='updateData(item.type)'>
                <mat-option *ngFor="let option of item.filterdData | async" [value]="option">
                    {{option}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
</div>

Answer 1

This will definitely work for you.

 <div class="col" *ngFor="let item of formItems;  index as i;let j=index">
    <mat-form-field>
        <input type="text" placeholder="{{item.label}}" aria-label="Number" matInput
               formControlName={{item.type}} [matAutocomplete]="i" id="item.type">
        <mat-autocomplete #i="matAutocomplete" (optionSelected)='updateData(item.type)'>
            <mat-option *ngFor="let option of item.filterdData | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

Let me know in comment if you don't see this solution useful. If formContolName does not work then try replacing it with [value]

<input type="text" placeholder="{{item.label}}" aria-label="Number" matInput
               [value]="item.type" [matAutocomplete]="i" id="item.type">