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

有人可以帮我如何在ngFor中创建动态模板引用变量,下面是我的代码

在这里,我想基于ngFor动态地将[matAutocomplete] =“ auto”与mat-autocomplete#auto =“ matAutocomplete”一起使用

    <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>
评论
  • cnon
    cnon 回复

    这绝对适合您。

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

    如果您认为此解决方案无用,请在评论中告知我。 如果formContolName不起作用,请尝试将其替换为[value]

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