如何在 angular 的 api 中使用無線電組中的 ngModel

Question

這是代碼。

列表.component.html

<form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()">
    <div nz-row *ngFor="let remark of checklist">
              <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
                <div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
                  <div nz-col nzSpan="8">
                    <label [textContent]="task.name"></label>
                  </div>
                  <div nz-col nzSpan="8">
                    <nz-form-item>
                      <nz-form-control>
                        <nz-radio-group formControlName="radiostatus" [(ngModel)]="radio" (ngModelChange)="onChangeStatus($event)">
                          <label nz-radio nzValue="passed">Passed</label>
                          <label nz-radio nzValue="failed">Failed</label>
                        </nz-radio-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </div>
            </div>
  </form>

列表.component.ts

checklist = [
    {
      "id": "txv3vvBr8KYB",
      "assetType": {
        "id": "1fKBO4w0XHg7H",
        "code": "PRD",
        "name": "Printing1"
      },
      "tasks": [
        {
          "id": "1fKBO4w0XHg7H",
          "name": "Task 1",
          "description": "Check oil spill"
        },
        {
          "id": "ESOSA6aCrOER",
          "name": "Sample1",
          "description": "Desc1"
        }
      ]
    },
    {
      "id": "EwQciw9whx6B",
      "tasks": [
        {
          "id": "1nU7uASqfvLPD",
          "name": "TASK8888",
          "description": "DESC8888"
        },
        {
          "id": "EwQciw9whx6B",
          "name": "TASK9999",
          "description": "DESC9999"
        }
      ]
    }
  ];

在傳遞或失敗中選擇時，在第1項上選擇時，它不應影響第二項。 例如，在第一個項目上，它選擇第二個項目中傳遞的內容，它不應該選擇第二個項目中的傳遞內容。

就我而言，當我選擇第一個項目的傳遞時，它會影響它選擇的第二個項目也傳遞。

Answer 1

在您的代碼中，您對所有表單控件都有相同的 ngModel 綁定。 嘗試分配唯一名稱

組件.html

<div nz-row *ngFor="let remark of checklist; let  i = index">
      <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
        <div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
          <div nz-col nzSpan="8">
            <label [textContent]="task.name"></label>
          </div>
          <div nz-col nzSpan="8">
            <nz-form-item>
              <nz-form-control>
                <nz-radio-group [(ngModel)]="task.id" (ngModelChange)="onChangeStatus($event)">
                  <label nz-radio nzValue="passed">Passed</label>
                  <label nz-radio nzValue="failed">Failed</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </div>
 </div>

例子