我有一个如下所示的系统,每当我键入引用ID时,它都会通过从数据库中获取该记录来生成与该记录相对应的记录。
我的问题是,每当我键入一个新的参考号并添加时,它就会覆盖现有记录,但是我想要的是,当我添加一个新的参考号时,该新记录将被添加到列表中。
html代码
<div *ngIf="show">
<div class="form-group">
<div class="col-sm-12">
<label class="col-sm-12 cm">Details</label>
<table class="table table-hover">
<tr>
<th>Reference ID</th>
<th>First Name</th>
<th>Surname</th>
<th>Reference </th>
</tr>
<td>{{Details.id}}</td>
<td>{{Details.firstname}}</td>
<td>{{Details.lastname}}</td>
<td>{{Details.reference}}</td>
</table>
</div>
</div>
</div>
打字稿
add() {
const data = {
reference: this.assistant.reference,
}
console.log(data);
this.Service.add(data)
.subscribe(
req => {
console.log("successful");
this.show = true;
this.Details.id = req['data']['member_record']['id'];
this.Details.firstname = req['data']['member_record']['first_name'];
this.Details.lastname = req['data']['member_record']['last_name'];
this.Details.reference = req['data']['member_record']['reference'];
},
error => {
console.log(error);
}
);
}
任何人都可以通过单击该按钮来一个接一个地追加记录吗,那里有一个单独的后端,所有模型,控制器,服务都相应地编写了。
PS:此外,如果有人能给我一些提示(而不是从数据库中而是从UI中显示的记录中删除)的提示(在下一步放置按钮之后),将非常有帮助。
答案 0 :(得分:0)
这是我的答案,
在您的.html
中<table>
<th>
<td>Reference ID</td>
<td>First Name</td>
<td>Surname</td>
<td>Reference</td>
</th>
<tr *ngFor="let detail of details">
<td>{{detail.id}}</td>
<td>{{detail.firstName}}</td>
<td>{{detail.surName}}</td>
<td>{{detail.reference}}</td>
</tr>
</table>
indetail.model.ts
export class Detail {
id : number;
firstName : string;
surName : string;
reference : string;
}
在您的.ts
中details : Detail[] = [];
因此,在您的添加按钮中,有一个函数调用add(),其实现应如下所示,
add(){
detail = getRecordFromDb(); //get the generated record from table.
this.details.push(detail); // push above line generated record in to details array.
}
答案 1 :(得分:0)
还有另一种解决方法,可以将项目添加到现有列表中。
this.details=([... this.details,...detail])
在这里,明细是我们可以重复添加项目的列表,而明细是我们每次都能获得的新模型。因此,每次都会在细节上附加新数据而不会被覆盖。