오브젝트 입력 배열이있는 각도 2 형식

Question

Angular2를 배우기 위해 인보이스 발행 앱을 구축 중입니다. 내가 부딪히는 문제는 행에 3 개의 입력이 포함되어 있고 행 항목의 배열에있는 객체에 바인딩해야하는 행 항목 구성 요소를 작성하는 방법입니다.

1 각도에서는 입력의 컨테이너에 ng-form 지시어를 추가하여 쉽게 얻을 수 있습니다. 여기에 상응하는 것은 무엇입니까?

HTML :

<form name="form" ng-submit="$ctrl.submit(form)" novalidate> 

<!-- some more code --> 

<ul class="list invoice-table__body"> 
    <li *ngFor="let item of model.lineItems; let i = index"> 
    <input 
     type="text" 
     name="description" 
     class="col-sm-8" 
     [(ngModel)]="item.description"> 

    <input 
     type="number" 
     name="quantity" 
     class="col-sm-2" 
     [(ngModel)]="item.quantity"> 

    <input 
     type="number" 
     name="total" 
     class="col-sm-2" 
     [(ngModel)]="item.total"> 
    </li> 
</ul> 

<!-- some more code --> 

</form> 

구성 요소 :

import { Component } from '@angular/core'; 
import { Invoice } from './invoice.model'; 
import { InvoiceLineItems } from './invoice-line-item.model'; 

@Component({ 
    selector: 'create-invoice', 
    templateUrl: 'create-invoice/create-invoice.html' 
}) 
export class CreateInvoiceComponent { 
    model: Invoice = new Invoice(
    85, 
    'CAD', 
    null, 
    [ // lineItems 
     new InvoiceLineItems('Web development for BAnQ'), 
     new InvoiceLineItems('Sept 1 to 3', 14, 910), 
     new InvoiceLineItems('Sept 5 to 10', 34, 5293), 
     new InvoiceLineItems('Sept 11 to 20', 24, 5293), 
     new InvoiceLineItems('Sept 21 to 38', 11, 2493), 
    ], 
    13989, 
    100, 
    200, 
    15000, 
    '', 
    null, 
    '$' 
); 

    getTotal(): number { 
    return this.model.lineItems.reduce(
     (a, b): number => a + (isNaN(b.total) ? 0 : b.total), 
     0); 
    } 
} 

Answer 1

여기서 문제 입력 이름으로, 귀하의 경우에는 당신이 이름을 사용하고있다 = "설명이 여기에

내 코드입니다 "여기서 일어나는 일은 항상 form.description.value를 마지막 설명과 함께 upadte 할 것입니다. 귀하의 경우에는 설명 배열이 있어야합니다. form.description [i] .value 배열이 있어야합니다.

수정 사항은 고유 한 변경 설명입니다. = "설명 _ {I} {}"는 내부 ngFor 모든 입력

반복이

이름. 이 문제를 해결을 위해이 작업을 수행 할 수 있습니다

<ul class="list invoice-table__body"> 
    <li *ngFor="let item of invoice.lineItems; let i = index"> 

    <input 
     type="text" 
     name="description_{{i}}" 
     class="col-sm-8" 
     [(ngModel)]="invoice.lineItems[i].description"> 

    <input 
     type="number" 
     name="quantity_{{i}}" 
     class="col-sm-2" 
     [(ngModel)]="invoice.lineItems[i].quantity"> 

    <input 
     type="number" 
     name="total_{{i}}" 
     class="col-sm-2" 
     [(ngModel)]="invoice.lineItems[i].total"> 
    </li> 
</ul> 

당신은 당신의 예를 여기에 작업을 볼 수 있습니다 https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview

나의 추천은 항상 ReactiveForms (모델 기반 양식)와 함께 작동, 난 것 어쩌면 유일한 케이스 FormsModule (템플릿 기반 양식)은 작은 양식 용입니다. 그것의 쉽고 더 나은 데이터 배열을 수행합니다.

희망 사항이 귀하의 문제를 해결했습니다.