Html 如何将删除按钮绑定到删除请求?
我有一个html文件,它使用ng for显示GET请求中的元素,在显示的每个元素旁边都显示一个红色的删除按钮,单击时,我希望从mongo数据库中删除该元素(触发删除)。我在expressjs中设置了DELETE,但我想知道如何将按钮绑定到列表中的相应元素?它在浏览器中加载,如下所示:Html 如何将删除按钮绑定到删除请求?,html,angular,Html,Angular,我有一个html文件,它使用ng for显示GET请求中的元素,在显示的每个元素旁边都显示一个红色的删除按钮,单击时,我希望从mongo数据库中删除该元素(触发删除)。我在expressjs中设置了DELETE,但我想知道如何将按钮绑定到列表中的相应元素?它在浏览器中加载,如下所示: detalis - unique_id del_button detalis - unique_id del_button
detalis - unique_id del_button
detalis - unique_id del_button
detalis - unique_id del_button
以下是我的组件:
export class DetailsComponent implements OnInit {
messages: Message[] = [];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.messageService.getMessages()
.subscribe(
messages => this.messages = messages,
error => console.error(error)
);
console.log(this.messages);
}
onDeleteMessage() {
this.messageService
.deleteServiceWithId("Id", "8631")
.subscribe(
result => console.log(result),
error => console.error(error)
);
}
}
用作模板的HTML:
<div class="bs-example">
<div class="panel-group" [attr.id]="'accordion_' + i" *ngFor="let message of messages; let i = index;">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" [attr.data-parent]="'#accordion_' + i" [attr.href]="'#collapseOne_' + i">{{ message.firstName }} {{ message.lastName }}</a>
</h4>
</div>
<div [attr.id]="'collapseOne_' + i" class="panel-collapse collapse">
<div class="panel-body">
details here {{ message.empId }}
<span class="pull-right">
<button type="button" class="btn btn-danger" aria-label="Left Align" (click)="onDeleteMessage()">
<span class="glyphicon glyphicon-remove-sign pull-right" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
此处的详细信息{message.empId}
对于每个删除按钮,将要删除的消息id传递到onDeleteMessage()
对于每个删除按钮,将要删除的消息的id传递到onDeleteMessage()
发布你在消息中的内容。如果你在控制台中有任何错误,请发布你在消息中的内容。如果你在控制台中有任何错误,请发布tooOh ok,我是angular2的新手,并且过度思考了这个问题,谢谢。哦ok,我是angular2的新手,并且过度思考了这个问题,谢谢。
<!-- I'm not sure what the name for each id is but I'm assuming
its empId from the template you provided -->
<button class="btn btn-danger"
aria-label="Left Align"
type="button"
(click)="onDeleteMessage(message.id)">
</button>
onDeleteMessage(id: Number) {
this.messageService
.deleteServiceWithId(id)
.subscribe(
result => console.log(result),
error => console.error(error)
);
}