在Angular 8 CRUD中以用于编辑目的的形式填充JSON数据

Question

我正在使用前端的Angular 8和后端的Laravel进行SPA构建。 通过JWT将数据传递到后端，效果很好。 由于该应用程序是CRUD，因此在读取部分上（使用表格以良好的表格结构显示来自后端的所有数据）。

在表上（每行都有一个“编辑和删除”按钮），当用户单击“编辑”按钮时，正在捕获id，传递给bakend并获取与该特定用户有关的数据，然后将其返回到前端，称为另一个组件EditComponent。 数据采用JSON格式。

现在在将JSON对象中的每个字段填充到表单编辑字段中时遇到问题，以便用户可以更新表单

在视图中转储后来自后端的数据

{{ singleUser | json }}

{ "id": 8, "name": "man man", "age": 6, "gender": "Male", "created_at": "2019-07-02 10:43:35", "updated_at": "2019-07-02 10:43:35" } 

edit.component.html表单

<form>
<!--Children details-->
<div class="card-header childheader">Update Details</div>
    <div class="card-body">
         <div class="form-group row">
         <div class="col-sm-12">
            <label for="childFirstName">Child Name</label>
            <input 
                type="text" 
                name="childFirstName" 
                class="form-control" 
                value="{{singleUser.name}}"
                id="childFirstName" 
                placeholder="Child FirstName">
        </div>
    </div>
    <div class="form-group row">
         <div class="col-sm-6">
             <label for="childAge">Child Age</label>
            <select 
                class="form-control" 
                id="chAge" 
                name="childAge" 
                value="{{singleUser.age}}"
                [(ngModel)]="form.childAge" 
                required>
                <option value="" selected disabled> Child's Age</option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
                <option value="6"> 6 </option>
                <option value="7"> 7 </option>
                <option value="8"> 8 </option>
                <option value="9"> 9 </option>
                <option value="10"> 10 </option>
                <option value="11"> 11 </option>
                <option value="12"> 12 </option>
                <option value="13"> 13 </option>
                <option value="14"> 14 </option>
                <option value="15"> 15 </option>
                <option value="16"> 16 </option>
                <option value="17"> 17 </option>
                <option value="18"> 18 </option>
            </select>
        </div>
        <div class="col-sm-6">
            <label for="childGender">Child Gender</label>
            <select 
                class="form-control" 
                id="childGender" 
                name="childGender" 
                value="{{singleUser.gender}}"
                [(ngModel)]="form.childGender"   
                required>
            <option value="" style="display:none"> Child's Gender</option>
                <option value="Male"> Male</option>
                <option value="Female"> Female </option>
            </select>
        </div>
    </div>
       <!--END children-->
    <div class="form-group row">
        <div class="col-sm-12">
            <button 
                type="submit" 
                class="btn btn-lg btn-success btn-block" 
                [disabled]="!createForm.valid">Update Details </button>
        </div>
    </div>
    </div>
</form>

Answer 1

您无需在此处使用{{ }}作为value属性，

只需执行以下操作

 value="singleUser.name"

如果不是@TonyNgo，则建议使用[(NgModel)]进行双向绑定。

无论何时更改变量，这都会更新您的变量。

Answer 2

也许您只需要这样显示

{{singleUser.name}}

{{singleUser.age}}

{{singleUser.gender}}

如果要在输入中显示数据，则只需使用ngModel进行更新，就像这样

[ngModel]="singleUser?.gender"

或2路装订

[(ngModel)]="singleUser.gender"

Answer 3

绑定应该使用[[ngModel）]完成，如下所示。

<input type="text"  name="childFirstName" class="form-control [(ngModel)]="singleUser.name" id="childFirstName" placeholder="Child FirstName"/>