迭代如何使用Angular嵌套在表行上的循环

Question

我不是要为循环介绍以将重新共振数据显示到表行中。我希望以数组格式的数据值。请告诉我如何得到这个。以下是我的代码。

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> &nbsp; &nbsp; 
           &nbsp;&nbsp;
            <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.sstatic.net/cqekb.png [2]： https://i.sstatic.net/infkv.png

Answer 1

我要做的是：

<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>

格式化并根据需要调整此代码。另外，尝试改善您的问题，给您的代码一个更好的格式。

Answer 2

我为此找到了解决方案。我是创建了FormGroup的内部formarray。那一个工作正常。