Angular 输入值更改并在提交后旧值中。示例演示

我的代码有两个问题

当我在销售表单中添加一些产品时，我输入的

说明

更改了所有

产品

当我更改输入产品时，销售中不会更改它

这些问题请看我的演示代码

我尝试了以下代码：

我的产品

  this.myform = this.fb.group({
  'id': new FormControl('', Validators.required),
  'name': new FormControl('', Validators.required),
  'description': new FormControl('', Validators.required),
  'price':new FormControl('', Validators.required),
  'quantity': new FormControl('', Validators.required)

});

我的产品html

<form [formGroup]="myform" (ngSubmit)="onAddProduct()">
  <h4 style="text-align:center">add product</h4>

   <div class="input-field col s12"> id
      <input formControlName="id" id="id" type="text" class="validate">
   </div>

   <div class="input-field col s12"> name
      <input formControlName="name" id="name" type="text" class="validate">
   </div>

   <div class="input-field col s12"> description
      <input formControlName="description" id="description" type="text" class="validate">
   </div>

   <div class="input-field col s12"> price
      <input formControlName="price" id="price" type="text" class="validate">
   </div>
   <div class="input-field col s12"> quantity
      <input formControlName="quantity" id="quantity" type="text" class="validate">
   </div>
  <br>
  <div id="add_contrat_button_container" class="row">
    <button id="add_contrat_button" type="submit" class="button button1">
      Shto
    </button>
  </div>
</form>

我的销售html

  <form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
 <h4 style="text-align:center">add sale</h4>
  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
       invoice_number:
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
         invoice_date:
          <input formControlName="invoice_date" id="invoice_date" type="date" >
        </div>
      </div>
      <div class="input-field col s4">
       description:
        <input formControlName="description" id="description" type="text" class="validate">
      </div>
    </div>
  </div>
  <br>
   <table>
    <thead>
      <tr style="color:black;">
        <th>id</th>
        <th>name</th>
        <th>description</th>
        <th>price</th>
        <th>quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>        
      <td><input formControlName="description" class="validate" [value]="item.description" [ngModel]="item.description" type="text">
      </td>
      <td>{{item.price}}</td> 
      <td>{{item.quantity}}</td> 
        </tr>
    </tbody>
  </table>
  <br>
  <br>
    <button type="submit">
      Register
    </button>
</form>

追加销售
发票编号：
发票日期：
说明：


身份证件
名称
描述
价格
量
{{item.id}
{{item.name}
{{item.price}}
{{item.quantity}




登记

请问如何解决这些问题，所以在最后我想

当我添加一些产品时，我希望描述是决定的

当我更改盐产品的描述时，我想发送我设置的最后一个描述

---

image

好的，我解决了您的问题，您的值设置不正确，应该设置为

value="{{item.description}}"

我还更改了您的服务，使用Behavior Subject，现在您可以获得产品列表，而不是单个产品

您的新服务。ts

从'@angular/core'导入{Injectable}；
从'@angular/core'导入{EventEmitter}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'@angular/Http'导入{Http，Response}；
进口“rxjs/Rx”；
从“rxjs/Observable”导入{Observable}；
将*作为数据从“../data.json”导入；
从“./product”导入{Products}；
从“/Sale”导入{Sale}；
@可注射（）
出口类服务{
私人产品：产品[]=[]；
私人销售：销售[]=[]；
productList:EventEmitter=新的EventEmitter（）；
构造函数（）{}
addProduct（产品：产品）{
本.产品.推（产品）；
this.productList.next（this.products）；
}
addsale（销售：销售）{
这个。销售。推销（销售）；
调试器；
}
getProduct（）{
调试器；
退回本产品；
}
}

以及新的HelloComponent.ts

从'@angular/core'导入{Component，Input}；
从“@angular/forms”导入{FormGroup、FormBuilder、FormControl、Validators}；
从“./Service”导入{Service}；
从“./product”导入{Products}；
从“@angular/material”导入{MatSlideToggleModule}；
从'@angular/Router'导入{Router，ActivatedRoute}；
@组成部分({
选择器：“你好”，
样式URL:['./hello.component.css']，
模板：`
追加销售
发票编号：
发票日期：
说明：


身份证件
名称
描述
价格
量
{{item.id}
{{item.name}
{{item.price}}
{{item.quantity}




登记
`
})
导出类HelloComponent{
@Input（）名称：string；
addsale:FormGroup；
产品:阵列;；
建造师(
公共服务:服务,，
私人fb:FormBuilder
) {
this.addsale=this.fb.group({
“发票编号”：新FormControl（“”，[Validators.required，Validators.nullValidator]），
“发票日期”：新FormControl（“”，需要验证器），
“说明”：新FormControl（“”，需要验证程序），
“销售id”：新FormControl（“”，需要验证程序），
“产品”：this.fb.array([
])
});
}
恩戈尼尼特（）{
this.service.productList.subscribe（productList=>{
this.products=产品列表；
});
}
ONADSALE（）{
让销售额=[]；
let sale=this.addsale.value
sale.products=this.products
让newsale=this.addsale.value
此.service.addsale（销售）；
控制台日志（销售）
}
}

在您的例子中，this.products=this.service.getProduct（）；是单个值而不是列表。可能有一个问题，请，你能修改我的代码吗？请，如果你在我的演示工作，请给我你的版本。对我来说，这不是工作。ThanxI添加了演示。是的，但当我在销售中更改描述时，此更改不会显示在提交中。请看我更新的帖子中的图片，但你们需要更好地解释你们想要什么

value="{{item.description}}"

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import * as data from '../data.json';
import { Products } from './product';
import { Sale } from './sale';

@Injectable()
 export class Service {
  private products: Products[] = [];
   private sales: Sale[] = [];
   productList: EventEmitter<Products[]> = new EventEmitter();

  constructor() { }

   addProduct(product: Products) {
    this.products.push(product);
    this.productList.next(this.products);
  }
    addsale(sale: Sale) {
    this.sales.push(sale);
    debugger;

  }
    getProduct() {
    debugger;
    return this.products;
  }
}

import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { Service } from './service';
import { Products } from './product';
import { MatSlideToggleModule } from '@angular/material';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'hello',
  styleUrls: ['./hello.component.css'],
  template: `
  <form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
 <h4 style="text-align:center">add sale</h4>
  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
       invoice_number:
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
         invoice_date:
          <input formControlName="invoice_date" id="invoice_date" type="date" >
        </div>
      </div>
      <div class="input-field col s4">
       description:
        <input formControlName="description" id="description" type="text" class="validate">
      </div>
    </div>
  </div>
  <br>

  <table>
    <thead>
      <tr style="color:black;">
        <th>id</th>
        <th>name</th>
        <th>description</th>
        <th>price</th>
        <th>quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products">
           <td>{{item.id}}</td>
   <td>{{item.name}}</td>        
        <td>
          <input class="validate" formControleName="description" value="{{item.description}}" type="text">
        </td>
 <td>{{item.price}}</td> 
  <td>{{item.quantity}}</td> 
        </tr>
    </tbody>
  </table>
  <br>
  <br>
    <button type="submit">
      Register
    </button>
</form>




  `
})

export class HelloComponent {
  @Input() name: string;
  addsale: FormGroup;
  products: Array<Products>;


  constructor(
    public service: Service,
    private fb: FormBuilder
  ) {
    this.addsale = this.fb.group({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'invoice_date': new FormControl('', Validators.required),
      'description': new FormControl('', Validators.required),
      'sale_id': new FormControl('', Validators.required),
      'products': this.fb.array([

      ])
    });

  }

  ngOnInit() {
    this.service.productList.subscribe(productList => {
      this.products = productList;
    });
  }
  onaddsale() {
    let sales = [];
      let sale = this.addsale.value
    sale.products = this.products
    let newsale = this.addsale.value
    this.service.addsale(sale);
    console.log(sale)
  }
}