Angular 如何从*ngFor在.component.ts文件中生成的输入中获取值？

正如标题中所说，我希望从生成的输入中获取值。如何才能在

.ts

文件中处理它们

以下是我的

blabla.component.html

的代码：

    <form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">
    <input name="codeB" ngModel #codeB="ngModel" id="codeB" type="text" class="form-control frm" placeholder="Code Barre" />
    <input name="name" ngModel #name="ngModel" id="name" type="text" class="form-control frm" placeholder="Name Produit" />

    <table class="table table-striped">
            <tr *ngFor="let mag of listMagasins | async">
                <td>
                    <h4>{{mag.name}}</h4>
                </td>
                <td>
                    <input name="prix" ngModel #prix="ngModel" id="prix" type="text" 
                    class="form-control frm" placeholder="Price product" required />
                </td>
            </tr>
    </table>

    <!--<input name="nameMag" ngModel #nameMag="ngModel" id="nameMag" type="text"
     class="form-control frm" placeholder="Magasin" />-->

    <button class="btn btn-primary" type="submit">Ajouter</button>
</form>

{{mag.name}
阿约特

---

谢谢你的帮助

这可以通过对事物进行唯一命名来实现，而不是为每个输入命名

prix

，如果我们想要TS中的值，可以使用

ViewChildren

：

component.html

<tr *ngFor="let mag of listMagasins | async; let i = index;">
            <td>
                <h4>{{mag.name}}</h4>
            </td>
            <td>
                <input name="prix{{i}}" ngModel #prix="ngModel" id="prix" type="text" 
                class="form-control frm" placeholder="Price product" required />
            </td>
        </tr>

{{mag.name}

组件。ts

import {ViewChildren} from "@angular/core"

export class ComponentClass {
     @ViewChildren('prix') inputs;
<...>
}

从“@angular/core”导入{ViewChildren}
导出类组件类{
@ViewChildren（“prix”）输入；
}

这将设置表单，使其具有单独绑定的控件，并在TS文件中为我们提供输入

---

这里有一个你可以搞乱的

谢谢艾尔的编辑：）谢谢，这正是我要找的！