Eckige 2-Formular mit array von Objekt-Eingänge
Baue ich eine Rechnungsstellung app zu lernen Angular2. Die Frage, die ich bin, zu schlagen ist, wie das line-Element, Komponente, wo eine Zeile enthält 3 Eingänge kommen soll, aus und binden an ein Objekt in einem array von Einzelposten.
Im Winkel 1, ich kann leicht erreichen dies durch hinzufügen einer ng-form
- Richtlinie auf den container für die Eingänge. Was ist das äquivalent hier?
Hier ist mein code:
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>
Komponente:
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);
}
}
Welches Problem haben Sie? Nichts anzeigen, oder keine Bindung? Bauen oder in der Konsole Fehler?
Die Werte des letzten array-Elements angezeigt werden 5 mal. Keine Fehler. Was seltsam ist, ist, dass, wenn ich ändern Sie die input-Werte, das richtige Objekt im array ändert.
Wenn ich verketten Sie die Eingabe der Namen mit dem index, es funktioniert gut... aber ich bin mir nicht sicher, ob es die Winkel 2 Weg nicht...
Die Werte des letzten array-Elements angezeigt werden 5 mal. Keine Fehler. Was seltsam ist, ist, dass, wenn ich ändern Sie die input-Werte, das richtige Objekt im array ändert.
Wenn ich verketten Sie die Eingabe der Namen mit dem index, es funktioniert gut... aber ich bin mir nicht sicher, ob es die Winkel 2 Weg nicht...
InformationsquelleAutor justinledouxweb | 2016-10-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist hier das problem in der input-Namen, in Ihrem Fall, Sie sind mit name = "Beschreibung", was hier geschieht, ist etwas, das immer wird upadte form.Beschreibung.Wert mit der letzten Beschreibung. In Ihrem Fall haben Sie ein array von Beschreibungen zu können, müssen Sie array der form.Beschreibung[i].Wert
Also das Update ist die Beschreibung ändern, um eindeutig zu sein.
name="description_{{i}}"
Wiederholen Sie dies für jede Eingabe innerhalb eines ngFor.
Für dieses Problem zu beheben können Sie dies tun:
können Sie sehen, Ihr Beispiel funktioniert hier:
https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview
Meine Empfehlung: arbeiten Sie immer mit ReactiveForms (Model Driven Forms), vielleicht der einzige Fall, den ich verwenden FormsModule (Vorlagen-Formulare) für die kleine form. Es ist Einfacher und besser für tun arrays von Daten.
Hoffe, Ihr Problem gelöst.
Thx für diese Antwort, aber ich würde eine Sache ändern:
[(ngModel)]="item.description"
etc.stackoverflow.com/a/47567879/1305026 weitere Informationen über genau dieses problem gefunden werden kann in dieser Antwort.
InformationsquelleAutor Daniel Dancziger