应用文本框编辑数据字段angular4

Question

在我的网格视图中，有一个名为remark的列名。该字段包含许多值，包括absence。我想编辑remark值，如果它只是absence，编辑后需要点击前面的图标。以下提到了我写的代码。

<div class="row"  *ngFor="let item_r of employee>
<div class="col-sm">
    <span *ngIf="item_r.remarks=='Absence'">
    <input    [value]=item_r.remarks (input)='item_r.remarks=$event.target.value'>
    <span   class="glyphicon glyphicon-info-sign" aria-hidden="true"        style="color:purple" title="Edit"   (click)="EditValue($event,item_r.remarks,item_r.log_id)" >
    </span>
</span>
</div>
</div>
                           

当我开始编辑文本框时，由于条件为假，它会消失。我应该如何使其正常工作。

只有当remark ='Absence'时才会出现文本框。当评论有不同的值，如'旅行'（下面附上例子），只有'旅行' 需要显示。备注值的文本框与“缺勤”不同。

Answer 1

你可以试试这个：

 <div class="row"  *ngFor="let item_r of employee>
    <div class="col-sm" *ngInit="item_r.remarks=='Absence' as isAbs">
        <span *ngIf="isAbs">
        <input    [value]=item_r.remarks (input)='item_r.remarks=$event.target.value'>
        <span   class="glyphicon glyphicon-info-sign" aria-hidden="true"        style="color:purple" title="Edit"   (click)="EditValue($event,item_r.remarks,item_r.log_id)" >
        </span>
    </span>
    </div>
    </div>

<强>已更新：

您可以创建自定义指令

@Directive({
  selector: '[var]',
  exportAs: 'var'
})
class VarDirective {
  @Input() var:any;
}

模板：

<div class="row"  *ngFor="let item_r of employee">
    <div class="col-sm" #aVariable="var" var="item_r.remarks=='Absence'">
        <span *ngIf="aVariable.var">
        <input    [value]=item_r.remarks (input)='item_r.remarks=$event.target.value'>
        <span   class="glyphicon glyphicon-info-sign" aria-hidden="true"        style="color:purple" title="Edit"   (click)="EditValue($event,item_r.remarks,item_r.log_id)" >
        </span>
    </span>
    </div>
    </div>

我已将我的代码添加到https://plnkr.co/edit/XfWbJ4OeZ33H9WNATRDe?p=preview