我不想迭代for循环以显示resonce数据到表行。我想要数组格式的数据值。请告诉我怎么得到这个。下面是我的代码。
HTML文件
<div class="row">
<form *ngIf="!isError" [formGroup]="userForm" (ngSubmit)="SubmitForm()">
<div class="col-12 col-md-6 col-sm-12 userRows" formArrayName="criteria">
<div *ngFor="let quantity of getCriteria().controls; let i=index" [formGroupName]="i">
<table>
<thead>
<tr>
<td>
<tr>
<th class="col-4"><label for="colFormLabel" class="col-sm-4 col-form-label">{{mylabels.criteria}}
</label></th>
<th class="col-4"><label for="colFormLabel" class="col-sm-4 col-form-label">{{mylabels.rating}}
</label></th>
<th class="col-4"><label for="colFormLabel"
class="col-sm-4 col-form-label">{{mylabels.feedbackcomment}}</label></th>
</tr>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<tr *ngFor="let feedbacksList of substring">
<td class="col-4">
<!-- <p class="innerproddesc" [innerHtml]="feedbacksList"></p> -->
<input type="text" class="form-control w-90" formControlName="criteriaText"
value="{{substring}}">
</td>
<td>
<select class="col-4" formControlName="rating" class="rating" (change)="selectedRating($event)">
<option [value]="rating" *ngFor="let rating of rating">
{{rating}}</option>
</select>
</td>
<td class="col-4"><input type="text" class="form-control w-90" formControlName="feedbackcomment">
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="row d-flex justify-content-end">
<button [routerLink]="['/user-list']" type="button"
class="btn btn-gray btn-sm mr-4">{{mylabels.cancel}}</button>
<button type="submit" [disabled]="!userForm.valid"
class="btn btn-blue btn-sm ">{{mylabels.save}}</button>
</div>
</div>
</div>
</form>
</div>
TS文件
this.userForm = this.fb.group({
criteria: this.fb.array([]),
skill: '',
typeofinterview: '',
videoquality: '', overallrating: '',
});
ngOnInit(): void {
this.getCriteria().push(this.newCriteria());
}
get f() { return this.userForm.controls; }
getCriteria(): FormArray {
return this.userForm.get('criteria') as FormArray;
}
newCriteria(): FormGroup {
return this.fb.group({
criteriaText: '',
rating: '',
feedbackcomment: '',
domainknowledge: ''
});
}
getAllFeed() {
this.apiService.httpGetCall('GetAllFeed').subscribe((res: any) => {
this.feedList = res.feed;
this.feedbList.forEach((feedres: any) => {
this.feedCriteria = feedres.criteria;
this.substring = this.feedCriteria.split('~');
console.log("substring", this.substring);
//output
// substring
// (3) ['New Feedback with CU1', 'New Feedback with CU2', 'New Feedback with CU3']
// 0: "New Feedback with CU1"
// 1: "New Feedback with CU2"
// 2: "New Feedback with CU3"
// length: 3
})
},
(error: any) => {
this.showLoader = false;
this.isError = true;
this.errorData = {
reason: error.message,
};
}
);
}
SubmitForm() {
const urlarr: any = [];
this.userForm.value.criteria.forEach((i: any) => {
urlarr.push({
criteriaText: i.criteriaText,
rating: i.rating,
feedbackcomment: i.feedbackcomment,
domainknowledge: i.domainknowledge,
});
});
const savedata = {
criteria: urlarr,
};
console.log('savedata :', savedata);
}
}
根据响应,我在那里为3行输入3个值。下面是截图[[输入图片描述][1]][1]
点击保存按钮后
我希望输出如下
criteria: Array(3)
0: {criteriaText: 'New Feedback with CU1', rating: '5', feedbackcomment:'feed 1' }
1: {criteriaText: 'New Feedback with CU2', rating: '6', feedbackcomment:'feed 2'}
3:{criteriaText: 'New Feedback with CU3', rating: '7', feedbackcomment:'feed 3'}
但是我只得到第三行值,如下所示:
criteria: Array(1)
0: {criteriaText: '', rating: '7', feedbackcomment: 'feed 3'}
length: 1
[![2]][2]
请让我知道我怎样才能得到我预期的产出。请参考我的UI和输出的截图,我得到
谢谢。[1]: https://i.stack.imgur.com/cqEKB.png[2]: https://i.stack.imgur.com/iNFKV.png
我会怎么做:
<tr>
<td>{{mylabels.criteria}}</td>
<td>{{mylabels.rating}}</td>
<td>{{mylabels.feedbackComment}}</td>
</tr>
<tr *ngFor="let item of items">
<td>{{items[item ]?.id}}</td>
<td>{{items[item ]?.name}}</td>
<td>{{items[item ]?.desc}}</td>
</tr>
根据需要格式化和调整此代码。同时,试着改进你的问题,给你的代码一个更好的格式。
我得到了解决方案。我在formmarray中创建了FormGroup。那个也很好。