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

【问题标题】：Angular - How to create dynamic template variable inside NgForAngular - 如何在 NgFor 中创建动态模板变量
【发布时间】：2020-08-27 00:04:54
【问题描述】：

有人可以帮我如何在 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>

【问题讨论】：

标签： angular angular-material ngfor

【解决方案1】：

这绝对适合你。

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

【讨论】：