Javascript 如何通过索引禁用输入？

有必要在选定的行输入表单上仅显示用于编辑而非该组的所有内容

检查此处的所有代码：

---

我想单独编辑每个字段，而不是一次编辑所有字段。

我可以理解您的问题。正如上面其他人所说的，有很多更好的方法来实现它。但是通过你的闪电战我可以解决这个问题。我在此附上链接：

同时在此处添加代码：

html:

---

问题是您对所有字段使用布尔“编辑”，因此一旦您编辑一个字段，它将禁用所有内容。所以我说得更具体。

请澄清您的问题。您想禁用哪些输入，以及何时禁用？好的，再次检查stackblitz。接下来，对每个字段进行编辑。。如果我想更改示例第一行，我只想更改第一行。。我也会改变，我明白了，每个字段都需要一个单独的编辑状态，而不是所有字段都需要一个单独的编辑状态。改用数组。嗯，朋友，怎么做？如果我知道我不会问。如果你要为所有这些设置特殊变量，那么@chrisgp将非常糟糕。请不要破坏你的帖子。通过在Stack Exchange网络上发布，您已授予Stack Exchange在下的不可撤销的权利，以分发该内容，即无论您未来的选择如何。根据堆栈交换策略，帖子的非故意破坏版本是发布的版本，因此，任何故意破坏都将恢复。如果您想了解有关删除帖子的更多信息，请参阅：

        <div class="form-group" [ngClass]="{'editing': editing}" >
            <label> Name</label>
            <input type="text" [(ngModel)]="test.name">
            <div class="value">{{ test.name }}</div>
            <button (click)="toggleEdit()">Edit</button>
          </div>

        <div class="form-group" [ngClass]="{'editing': editing}" >
            <label> Name</label>
            <input type="text" [(ngModel)]="test.lastname">
            <div class="value">{{ test.lastname }}</div>
            <button (click)="toggleEdit()">Edit</button>
          </div>

public editing:boolean = false;
  toggleEdit() {
    this.editing = !this.editing;
  }


.form-group .value {
    display: none;
  }
  
  .editing .value {
    display: flex;
  }
  
  .editing input {
    display: none;
  }

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>

<div class="form-group" [ngClass]="{'editing': editing.given_name}">
    <label for="number">First Name</label>
    <input type="text" class="form-control" formControlName="given_name" id="given_name" placeholder="Jane">
    <div class="value">{{user.given_name}}</div>
    <button (click)="toggleEdit('given_name')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.family_name}">
    <label for="street">Last Name</label>
    <input type="text" class="form-control" formControlName="family_name" id="family_name" placeholder="Doe">
    <div class="value">{{user.family_name}}</div>
    <button (click)="toggleEdit('family_name')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.nickname}">
    <label for="city">Public Name</label>
    <input type="text" class="form-control" formControlName="nickname" id="nickname">
    <div class="value">{{user.nickname}}</div>
    <button (click)="toggleEdit('nickname')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.gender}">
    <label for="zip">Gender</label>
    <input type="text" class="form-control" formControlName="gender" id="gender">
    <div class="value">{{user.gender}}</div>
    <button (click)="toggleEdit('gender')">Edit</button>
</div>

<div class="form-button-goup">
    <button type="submit" class="btn sml submit" [disabled]="form.invalid">Save</button>
</div>

    import { Component, Input, OnDestroy, OnInit } from "@angular/core";
    import {
    FormBuilder,
    FormControl,
    FormGroup,
    Validators
    } from "@angular/forms";

    @Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
    editing = {
    given_name: false,
    family_name: false,
    nickname: false,
    gender: false
  };

  user = {
    given_name: "Ted",
    family_name: "Mosley",
    nickname: "Tedster",
    gender: "Male"
  };

  form = new FormGroup({
    given_name: new FormControl(this.user.given_name, Validators.required),
    family_name: new FormControl(this.user.family_name, Validators.required),
    nickname: new FormControl(this.user.nickname),
    gender: new FormControl(this.user.gender, Validators.required)
  });

  toggleEdit(attribute) {
    console.log(attribute);
    this.editing[attribute] = !this.editing[attribute];
  }
}