Angular2：无法获取NGFFor在ngForm中重复输入的输入值

我试图设置一个表单，管理员用户可以设置气瓶的价格。一瓶有一个类型，名称，价格如下：Angular2：无法获取NGFFor在ngForm中重复输入的输入值

export class Bottle { 

    constructor(
    public typeId: string, 
    public name: string, 
    public price: number 
) 
    { } 
}

这里显示的形式：一个帐户ID输入，并与ngFor重复瓶子的列表。

<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" > 

    <div class="form-group"> 
     <label for="accountId ">Account ID : </label> 
     <input type="text" class="form-control" id="accoundId" name="accountId" required [(ngModel)]="accountId"> 
    </div> 

    <div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index"> 
     <label for="bottlePrice ">{{bottle.name}} : </label> 
     <input type="text" class="form-control" id="bottlePrice" name="bottlePrice" [ngModel]="bottleArrayToUpdate[i].price"> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 
    </form>

我从另一个组件作为瓶（6实际上），他们的类型和名称设置阵列发送数据到我的形式，并且其中价格为空。

@Input() private bottleArrayToUpdate: Bottle[]; 

... 

onSubmit() { 
    this.submitted = true;  

    console.log(this.accountId); // => Works fine 
    console.log(this.bottleArrayToUpdate); // => All the prices are still null 
}

有没有办法让瓶子的重复输入的输入值和标准形式，而不是反应形式？

我也试过[ngModel]="bottle.price但我无法访问我的值。

感谢您的帮助

来源

2017-01-03 Alex Beugnet

此外，可能是一个可能的重复，但我没有找到答案在其他职位，因此我的问题。 –

您应该使用[()]记号，以确保双向绑定：

<input type="text" name="bottlePrice" [(ngModel)]="bottle.price">

也不要使用id，因为这应该是在页面上独一无二的，你是使用它在一个*ngFor :)

来源

2017-01-03 09:00:21 PierreDuc

哦，我的上帝，我想知道为什么这不起作用......没有奇迹......我觉得真的很愚蠢。非常感谢！（和好的提示以及） –

我想到了很多:)，因为你确实在'accoundId' – PierreDuc

Angular2：无法获取NGFFor在ngForm中重复输入的输入值

回答

相关问题