时间戳

首页 > 解决方案 > 如何使单选按钮在角度上动态

javascript - 如何使单选按钮在角度上动态

问题描述

这是代码：

list.component.html

<div class="sample" style="
          margin: 0;
    padding: 0;
    overflow-y: scroll;
    max-height: 100%;
        ">
          <nz-form-item *ngFor="let remark of tasks">
            <div nz-row nzType="flex" nzAlign="middle">
              <div nz-col nzSpan="14">
                {{ remark.description }}
              </div>
              <div nz-col nzSpan="10">
                <nz-form-control>
                  <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue"
                    (ngModelChange)="onChangeStatus($event)">
                    <label nz-radio nzValue="passed">Passed</label>
                    <label nz-radio nzValue="failed">Failed</label>
                  </nz-radio-group>
                </nz-form-control>
              </div>
            </div>
            <div nz-row *ngIf="radioValue === 'failed'">
              <div nz-col nzSpan="24">
                <nz-form-control>
                  <textarea nz-input placeholder="Remarks" class="remarks-textarea" type="text" name="otherRemark"
                    formControlName="otherRemark" [(ngModel)]="otherRemark"
                    [nzAutosize]="{ minRows: 1, maxRows: 2 }"></textarea>
                </nz-form-control>
              </div>
            </div>
          </nz-form-item>
        </div>

list.component.ts

tasks = [
{
      "id": "ESOSA6aCrOER",
      "createdBy": "admin",
      "timeCreated": "2019-09-05 11:24:07",
      "updatedBy": "admin",
      "timeUpdated": "2019-09-05 11:24:07",
      "name": "Sample1",
      "description": "Desc1",
      "status": "ACTIVE",
      "type": "PM"
    },
    {
      "id": "1og6aSsrlG3nT",
      "createdBy": "admin",
      "timeCreated": "2019-09-05 11:31:18",
      "updatedBy": "admin",
      "timeUpdated": "2019-09-05 11:31:18",
      "name": "Sample2",
      "description": "DESC2",
      "status": "ACTIVE",
      "type": "PM"
    },
    {
      "id": "tbwndVAkYtql",
      "createdBy": "admin",
      "timeCreated": "2019-09-05 11:33:11",
      "updatedBy": "admin",
      "timeUpdated": "2019-09-05 11:33:11",
      "name": "SAMPLE4",
      "description": "DESC4",
      "status": "ACTIVE",
      "type": "PM"
    },
    {
      "id": "1cyNFwhR4cI9n",
      "createdBy": "admin",
      "timeCreated": "2019-09-05 11:56:12",
      "updatedBy": "admin",
      "timeUpdated": "2019-09-05 11:56:12",
      "name": "SAMPLE5",
      "description": "DESC5",
      "status": "ACTIVE",
      "type": "PM"
    },
    {
      "id": "1qJWWRwz2Q2fD",
      "createdBy": "admin",
      "timeCreated": "2019-11-28 15:51:02",
      "updatedBy": "admin",
      "timeUpdated": "2019-11-28 15:51:02",
      "name": "Task 0001",
      "description": "Task 0001 Description",
      "status": "ACTIVE",
      "type": "PM"
    },
]

我想要的是选择单选按钮时。它不应该影响其他单选按钮。问题是当我选择第一个项目/单选按钮时。还有textarea，当我单击该项目中失败的所有textarea时，它会显示，它不应该显示影响另一个。

提前致谢

标签： javascriptangulartypescript

解决方案

我认为您忘记为每个任务备注将单选按钮分组在不同的组中。我可以看到您已经创建了带有组名 radiostatus 的单选按钮，但是对于您的所有评论，组名保持不变，这不应该是这种情况。您可以做的是在for循环中添加索引，然后根据备注动态地为不同的组赋予不同的名称。

 <nz-form-item *ngFor="let remark of tasks; let i = index">

现在，在给组名命名而不是给硬编码值时，通过使用索引产生不同的名称。

[formControlName]="'radiostatus'+ i"

推荐阅读