-1
Y at-il un problème avec mon code? Y at-il une erreur de syntaxe puisque mon erreur indique la balise de fermeture inattendue "tr". Cela peut arriver lorsque l'étiquette a déjà été fermée par une autre étiquette. Pour plus d'informations, voir https://www.w3.org/TR/html5 syntax.html # closure-elements-that-have-implied-end-tags ("" fa fa-trash-o "aria-hidden =" true "> Supprimer [ERROR ->]. . ont la fermeture que je voulais afficher mat_order dans une liste quelqu'un peut-il aider à ceAffichage des données sur Tr en Angulaire 4
<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onCreateOrders()" >
<div class="card-block" formArrayName="rows">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Material Name</th>
<th>Unit</th>
<th>Quantity</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of myForm.controls.rows.controls; let i = index [formGroupName]="i"; let mat_order of mat_orders">
<td>
{{mat_order.name}}
</td>
<td><input type="text" class="col-md-10" formControlName="unit" required></td>
<td><input type="number" class="col-md-6" formControlName="quantity" required></td>
<td><input type="number" class="col-md-6" formControlName="quantity" required></td>
<td>
<button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(i)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary float-right" [disabled]="!myForm.valid">Save Order</button>
</div>
</form>
ts
export class PurchaseOrderCreateComponent implements OnInit {
myForm: FormGroup;
formData;
subscription: any;
id: number;
projects: any;
orders: any;
suppliers: any;
mat_orders: any;
constructor(private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private injector: Injector,
private projectsService: ProjectsService,
private purchaseOrderService: PurchaseOrderService,
private suppliersService: SuppliersService) {
this.myForm = this.fb.group({
rows: this.fb.array([])
})
}
ngOnInit() {
this.route.params
.subscribe((params: Params) => {
this.id = +params['id'];
this.projectsService = this.injector.get(ProjectsService);
this.projectsService.getProject(this.id)
.subscribe(
(data:any) => {
this.projects = data;
console.log(data);
},
error => {
alert("ERROR");
})
});
this.initGroup();
this.getAllOrders();
this.getAllSuppliers();
// this.getSupplierByProjID(this.id);
}
initGroup() {
let rows = this.myForm.get('rows') as FormArray;
rows.push(this.fb.group({
project_id: [this.id],
material_id: [''],
unit: [''],
quantity: ['']
}))
}
getAllOrders(){
this.subscription = this.purchaseOrderService.getAll()
.subscribe(
(data:any) => {
this.orders = data.orders;
console.log(data);
},
error => {
alert("Error");
console.log(error);
});
}
getAllSuppliers(){
this.subscription = this.suppliersService.getAll()
.subscribe(
(data:any) => {
this.suppliers = data.suppliers;
console.log(data);
},
error => {
alert("Error");
console.log(error);
})
}
onSelectSupplier(form: NgForm) {
const project_id = this.id;
const supplier_id = form.value.supplier;
this.subscription = this.purchaseOrderService.selectSupplier(project_id, supplier_id)
.subscribe(
(data:any) => {
this.mat_orders = data.supplies;
let mat_orders = data.supplies;
console.log(mat_orders);
// location.reload();
},
error => {
alert("Error");
console.log(error);
})
}
onDeleteRow(rowIndex) {
let rows = this.myForm.get('rows') as FormArray;
rows.removeAt(rowIndex)
}
onCreateOrders(){
this.formData = this.myForm.get('rows').value
console.log(this.formData)
};
}
@Sajeetharan je n'en ai qu'un. La ligne de myForm.controls.rows.controls est pour les lignes tandis que le mat_order doit afficher ses données. –
Pouvez-vous fournir un plunkr ou stackblitz? – brijmcq
Je trouve que "laisse mat_order de mat_orders" n'est pas correct. Pouvez-vous essayer après avoir enlevé cela? –