我的代码DEMO
有2个问题description
会更改所有products
。这些问题请查看我的演示代码。
我试过这段代码:
我的产品ts
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>
我的销售
this.addsale = this.fb.group({
'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
'invoice_date': new FormControl('', Validators.required),
'description': new FormControl('', Validators.required),
'products': this.fb.array([
])
});
我的销售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>
请问如何解决这些问题,最后我想要
答案 0 :(得分:0)
好的,我已解决了您的问题DEMO,您的价值未正确设置应该是
value="{{item.description}}"
我也更改了您的服务,现在使用BehaviorSubject获取产品列表而不是单个产品
您的新 Service.ts
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;
}
}
您的新 HelloComponent.ts
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)
}
}