Question

我正在研究angular2。如果我从下拉列表中选择一个选项，我会得到选择的详细信息。如果缺少任何数据，则会显示文本框，如果存在数据，则会显示为标签。因此，我应用了以下逻辑：

HTML：

<div class="form-group">
        <label class="control-label col-md-2" for="options" >Select product:</label>
            <div class="col-md-4">
            <select class="form-control" id="options"  name="options" #optionsRef (change)="onSelectOption(optionsRef.value)">
                <option value="">Select</option>
                <option *ngFor="let product of products" [value]="product.name">{{product.name}}</option>
            </select>
            </div>
    </div>

<div class="form-group">
            <label class="control-label col-md-2" for="name">Name:</label>
            <div class="col-sm-4">
            <div *ngIf="!obj.editOn"  style="padding-top:5px">{{obj.name}}</div>
            <input type="text" class="form-control" id="name" name="name" [(ngModel)]="obj.name" #nameRef="ngModel" placeholder="Enter name" *ngIf="obj.editOn">
            <button type="button" class="btn" (click)="editDetails(obj)">Edit</button>
            <button type="button" class="btn" (click)="saveDetails(objbj)">Save</button>
            </div>
        </div>

<div class="form-group">
            <label class="control-label col-md-2" for="id">Product Id:</label>
            <div class="col-md-4">
            <div *ngIf="obj.id || (!obj.editOn)" style="padding-top:5px">{{obj.id}}</div>
            <input type="text" class="form-control" id="id" name="id" [(ngModel)]="obj.id" #idRef="ngModel"  placeholder="Enter product Id" *ngIf="(!obj.id || obj.editOn)">
            <button type="button" class="btn" (click)="editDetails(obj)">Edit</button>
            <button type="button" class="btn" (click)="saveDetails(obj)">Save</button>
            </div>
        </div>

对象数组在conponent.ts中定义如下：

private products = [{ name : "ABC" , id : null},
                     { name : "XYZ" , id : 101},
                     { name : "Geeta", id : null}
                    ];

一个空对象obj，根据选择从products数组中获取特定对象。

如果id的数据为null，则应显示文本框。问题是，当我输入任何数据时，它会读取第一个字符，并且会立即更改为标签，而不会等待保存按钮单击。

点击功能如下：

editDetails(selection:any ) {
    selection.editOn = true; 
}

saveDetails(selection:any ) {
    selection.editOn = false; 
}

Answer 1

简单逻辑告诉您在模板中显示或隐藏此输入的条件下，您无法使用obj.id。您只需要在代码中管理obj.editOn标志，以便正确切换id编辑模式。所以，你可以这样做：

<div *ngIf="!obj.editOn" style="padding-top:5px">{{obj.id}}</div>
<input <...skipped irrelevant things...> [(ngModel)]="obj.id" *ngIf="obj.editOn" (blur)="updateEditModeForId(obj)">

并在组件的代码中：

updateEditModeForId(obj) {
    obj.editOn = !obj.id;
}

initialize() {
    ...
    var obj = ...; // getting it from somewhere
    updateEditModeForId(obj);
    ...
}

这不是生产就绪的代码，它甚至可能无法编译，我只是想传达一般的想法。例如，您可以选择不使用模糊事件，只需依靠Save属性按id按钮即可。此外，您可能希望使用单独的标志来管理它的编辑模式。

如何禁用没有数据的文本框并保留（文本框）直到保存按钮单击

1 个答案: