将* ngif标签应用到当前范围/表格行

我有一个内置在HTML和AngularJS（Angular 2）中的表格。我正在使用ngIf指令从单击它的作用域触发可编辑字段。如果用户单击“编辑”按钮，则只有该行中的所有字段应该变为可编辑。将* 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; 
    }

来源

2017-08-03 Alim Charaniya

而不是跟踪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; 
}

来源

2017-08-03 20:26:23 Soviut

如果要启用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; 
}

来源

2017-08-03 20:26:27 alexmac

没有索引，你可以在你的位置模式更改为：

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

来源

2017-08-03 20:41:03

将* ngif标签应用到当前范围/表格行

回答

相关问题