Question

我有一个用HTML和AngularJS（Angular 2）构建的表。我正在使用ngIf指令从单击它的范围触发可编辑字段。如果用户单击“编辑”按钮，则该行中的所有字段都应该可编辑。

请参阅下面的代码。目前，当用户单击“编辑”按钮时，它将使表中的所有输入字段都可编辑。我怎么能阻止这个？只有“编辑”按钮范围内的行才可以编辑。我不知道如何使用AngularJS来实现这一目标。

<tbody>
    <tr *ngFor="let location of locations">
      <td *ngIf="!editing">{{location.apName}}</td>
      <td id="apNameInpit" *ngIf="editing"> <input [(ngModel)]="location.apName" type="text" placeholder="{{location.slackMemberID}}"/></td>

      <td *ngIf="!editing">{{location.locationName}}</td>
      <td id="locationNameInput" *ngIf="editing"> <input [(ngModel)]="location.locationName" type="text" placeholder="{{location.slackMemberID}}"/></td>

      <td *ngIf="!editing">{{location.lat}}</td>
      <td id="latInput" *ngIf="editing"> <input [(ngModel)]="location.lat" type="text" placeholder="{{location.slackMemberID}}"/></td>

      <td *ngIf="!editing">{{location.long}}</td>
      <td id="longInput" *ngIf="editing"> <input [(ngModel)]="location.long" type="text" placeholder="{{location.slackMemberID}}"/></td>

      <td *ngIf="!editing">{{location.mac}}</td>
      <td id="macInput" *ngIf="editing"> <input [(ngModel)]="location.mac" type="text" placeholder="{{location.slackMemberID}}"/></td>

      <td>
        <input type="button" *ngIf="!editing" class="btn btn-warning" (click)="engageEditing()" value="Edit" />
        <input type="button" *ngIf="editing" class="btn btn-primary" (click)="updateField(location)"  value="Update" />
        <input type="button" *ngIf="editing" class="btn btn-warning" (click)="cancelEditing()"  value="Cancel" />
      </td>
    </tr>
  </tbody>

这是我的location.component.ts代码

    engageEditing(){
    this.editing = true;
    }

Answer 1

如果您要为单个editing而不是整个组件启用location，则需要为每个location 记住。要将editing添加到location对象：

<tr *ngFor="let location of locations">
  <td *ngIf="!location.editing">{{location.apName}}</td>
  <td id="apNameInpit" *ngIf="location.editing"> <input [(ngModel)]="location.apName" type="text" placeholder="{{location.slackMemberID}}"/></td>

  ....

  <td>
    <input type="button" *ngIf="!location.editing" class="btn btn-warning" (click)="engageEditing(location)" value="Edit" />
    <input type="button" *ngIf="location.editing" class="btn btn-primary" (click)="updateField(location)"  value="Update" />
    <input type="button" *ngIf="location.editing" class="btn btn-warning" (click)="cancelEditing(location)"  value="Cancel" />
  </td>
</tr>

并在engageEditing和cancelEditing：

中进行更新

engageEditing(location) {
   location.editing = true;
}

cancelEditing(location) {
  location.editing = false;
}

Answer 2

不是将this.editing = 5;跟踪为布尔值，而是将其作为整数进行跟踪。然后你知道正在编辑数组中的哪个索引。

<tr *ngFor="let location of locations; let i = index">
  <td *ngIf="editing == i">{{location.apName}}</td>

然后在您的源代码中，您可以使用for循环索引来查看这是否是正在编辑的当前行：

engageEditing()

您还需要将索引传递给engageEditing(index) { this.editing = index; }方法，以便它知道正在编辑哪一行。

然后从你的按钮调用它并将索引传递给它。请注意我们从ngFor获得的<input type="button" *ngIf="!editing" class="btn btn-warning" (click)="engageEditing(i)" value="Edit" />。

-1

如果未编辑任何内容，请将值设置为0。使用cancelEditing() { this.editing = -1; }可能很诱人，但这是第一项的索引：

{{1}}

Answer 3

如果没有索引，您可以将位置模型更改为：

locations = [{
  name: "apName",
  value: null,
  slackMemberID: "something"
  }
...
]

<tr *ngFor="let location of locations; let i = index" 
    (click)="markToEdit(location.name)">
   <td *ngIf="editing !== location.name">{{location.apName}}</td>
   <td id="location.name" *ngIf="editing === location.name">
     <input [(ngModel)]="location.value" type="text" 
            placeholder="{{location.slackMemberID}}"/>
   </td>
</tr>


public markToEdit(name: string){
  this.editing = name;
}

或使用Reactive表单，最后您有

中的值

form.value

将* ngif标记应用于当前范围/表行

3 个答案: