Question

如标题中所述，我想从生成的输入中获取值。我该怎么做才能在.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>

感谢您的帮助！

Answer 1

这可以通过唯一地命名事物而不是命名每个输入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>

<强> component.ts

import {ViewChildren} from "@angular/core"

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

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

这里有Plunker你可以搞乱

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

1 个答案: