(Редактирование Angular 5) Я не могу получить значения объекта, который находится в NgModel

Question

Мне не удалось получить объект этого поля

component.html

<div class="form-group">
    <input type="number" name="totalPrice" class="form-control" #lastname="ngModel"[(ngModel)]="invoiceService.selectedInvoice.totalPrice" readonly>
</div> <!-- working ok -->
<div class="form-group">
      <input type="number" name="purchases" class="form-control" #purchases="ngModel" [(ngModel)]="invoiceService.selectedInvoice.purchases['product']" readonly>
</div><!-- not working -->

это стихия

Есть идеи?

вот пример (login => user:user@user.com | pass: user123) StackBlitz

Answer 1

Наконец это было решением. Это не работает, потому что я использую двустороннюю привязку NgModel, которая связывает входящее значение с той же переменной - i.product.name

<ng-template ngFor let-i [ngForOf]="invoiceService.selectedInvoice.purchases"> 
    {{i.product.name | json}}   
    <input type="text" name="purchases" class="form-control" [value]="i.product.name" readonly>
</ng-template>

Answer 2

Надеюсь, я правильно понял вашу проблему.

С помощью этой части invoiceService.selectedInvoice.purchases['product'] вы пытаетесь получить доступ к одной из записей массива типа product, я думаю.

Чтобы получить доступ к каждой записи вашего массива purchases, вам нужно сделать что-то подобное для каждой записи массива, но это не рекомендуется:

[(ngModel)]="invoiceService.selectedInvoice.purchases[0]" // get the first product (first entry of the array), etc.

Но индекс будет жестко закодирован, что, как я уже сказал, не рекомендуется.

Итак, вы должны сделать следующее:

<div class="form-group" *ngFor="let product of invoiceService.selectedInvoice.purchases">

    <!-- Creates an input field for every product's price -->
    <input type="number" name="price" class="form-control" [(ngModel)]="product.price" readonly>

    <!-- Print the product object as json -->
    {{prodcut | json}} 
</div>

Если вы не знакомы с *ngFor, см. здесь .