Angular2 : ngForm에서 NgFor로 입력 값을 반복 입력 할 수 없습니다.

admin 사용자가 가스 병 가격을 설정할 수있는 양식을 설정하려고합니다. 계정 ID 입력과 ngFor 반복 병 목록 : 여기 Angular2 : ngForm에서 NgFor로 입력 값을 반복 입력 할 수 없습니다.

export class Bottle { 

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

가 표시되는 형태는 다음과 병 타입, 이름, 및 추적과 같은 가격을 가진다.

<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)의 배열로 다른 구성 요소에서 내 양식에 데이터를 보내고있다, 그리고 가격가 null입니다.

@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 : ngForm에서 NgFor로 입력 값을 반복 입력 할 수 없습니다.

답변

관련 문제