Question

我有一个JSON对象，其结构要在单击表格行上的“编辑”按钮时以下面的形式显示以供编辑。

json

{
 "id": 123, 
 "name": "Paul", 
 "cars": [
    {
     "type": "toyota", 
     "year": "2013"
    },
    {
     "type": "audi", 
     "year": "2010"
    }
  ]
}

我需要有关如何在我的表文件中以逗号（type）分隔的方式显示每个cars对象的,的帮助。我得到了显示的对象id和name，但没有显示cars数组中的属性。如何完成我的.ts代码，以便每辆车的type都可以显示在我的桌子上。

.ts

showRowDetail( data: any ) {
   this.formData.controls.id.setValue( data.id );
   this.formData.controls.name.setValue( data.name );
   //how do I update here to set the cars: types
}

.html

<div class="form-group">
    <label>ID:</label> <input type="text" class="form-control"
         formControlName="id">
</div>
<div class="form-group">
    <label>Name:</label><input type="text" class="form-control"
        formControlName="name">
</div>
<div class="form-group">
    <label>Cars:</label> <input type="text" class="form-control" 
        formControlName="cars">
</div>

我省略了*ngFor表代码，在编辑按钮上使用了showRowDetail函数，单击该函数会打开一个模式，该模式以显示对象数据的形式出现。 data.id和data.name字段正在工作，只有我需要帮助的汽车type。

Answer 1

如何在我的表文件中显示每个“汽车”对象的“类型” 用逗号分隔（，）

使用map()和join()从type数组中生成逗号分隔的cars值。

showRowDetail( data: any ) {
   this.formData.controls.id.setValue( data.id );
   this.formData.controls.name.setValue( data.name );

   let types = data.cars.map(car => car.type).join(", ");
   this.formData.controls.cars.setValue(types);
}

如何以角形显示表单字段中的复杂对象属性

1 个答案: