-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 저는 단 하나뿐입니다. myForm.controls.rows.controls의 행은 mat_order가 데이터를 표시하는 동안 행에 사용됩니다 –
plunkr 또는 stackblitz를 제공 할 수 있습니까? – brijmcq
'let mat_order of mat_orders'가 맞지 않습니다. 이걸 제거한 후에해볼 수 있니? –