将 *ngif 标签应用于当前范围/表格行答案

【问题标题】：Apply *ngif tag to current scope/table row将 *ngif 标签应用于当前范围/表格行
【发布时间】：2017-08-04 04:41:03
【问题描述】：

我有一个用 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;
    }

【问题讨论】：

标签： javascript html angular

【解决方案1】：

如果您想为单个location 而不是整个组件启用editing，您需要为每个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;
}

【讨论】：

【解决方案2】：

不是将editing 作为布尔值跟踪，而是将其作为整数进行跟踪。然后您就知道数组中的哪个索引正在被编辑。

this.editing = 5;

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

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

您还需要将索引传递给您的 engageEditing() 方法，以便它知道正在编辑哪一行。

engageEditing(index) {
  this.editing = index;
}

然后从您的按钮调用它并将索引传递给它。注意我们从ngFor 得到的i。

<input type="button" *ngIf="!editing" class="btn btn-warning" (click)="engageEditing(i)" value="Edit" />

当没有编辑任何内容时，将值设置为-1。使用0 可能很诱人，但这是第一项的索引：

cancelEditing() {
  this.editing = -1;
}

【讨论】：

【解决方案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;
}

或者使用响应式表单，最后你在

中有值

form.value

【讨论】：