-1
コードに問題がありますか？エラーが予期しない終了タグ "tr"と表示されるため、構文エラーはありますか？タグが既に別のタグで閉じられている場合に発生する可能性があります。詳細はhttps://www.w3.org/TR/html5 syntax.html＃closing-elements-that-implied-end-tags（ "fa fa-trash-o" aria-hidden = "true"> [ERROR - >]を削除してください。 。私はリストにmat_order表示したい閉じを持っている誰もがこれを助けることができるTrのデータを角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私は1つしかありません。 myForm.controls.rows.controlsの行は、mat_orderがそのデータを表示するときの行です。 –
plunkrまたはstackblitzを提供できますか？ – brijmcq
私は 'let mat_order of mat_orders'が正しくないと思います。これを取り除いてみることができますか？ @ KarthickManoharan。 –