输入表单字段无法在Angular app中更新?
我正在创建一个简单的网页,该网页具有创建新对象输入表单字段无法在Angular app中更新?,angular,typescript,twitter-bootstrap,mdbootstrap,Angular,Typescript,Twitter Bootstrap,Mdbootstrap,我正在创建一个简单的网页,该网页具有创建新对象Partner并将其发送到服务器的模式。和几个输入字段以显示新创建的数据。我使用Angualr10和用于组件 我有一个按钮和一个表单,其中只有输入字段,这些字段是禁用的,它们仅用于表示创建的合作伙伴 登录页面后,用户可以单击按钮打开模式,输入有关合作伙伴的新数据。点击“save”后,我成功地将Partner对象发送到服务器,并用id将其取回。之后,currentPartner被初始化且不为空 我的问题是无法使用currentPartner对象更新输
Partner
并将其发送到服务器的模式。和几个输入字段以显示新创建的数据。我使用Angualr10和用于组件
我有一个按钮
和一个表单
,其中只有输入
字段,这些字段是禁用的,它们仅用于表示创建的合作伙伴
登录页面后,用户可以单击按钮打开模式,输入有关合作伙伴的新数据。点击“save”
后,我成功地将Partner
对象发送到服务器,并用id将其取回。之后,currentPartner
被初始化且不为空
我的问题是无法使用currentPartner
对象更新输入字段。我如何知道currentPartner
不为空?好的,如果我点击任何一个输入字段(在向服务器发送数据之后),该字段将用我之前在模式中输入的数据更新
代码如下:
currentPartner : Partner; //declare partner
savePartnerAndCloseModal(modal : any){
modal.hide()
var partner = <Partner>{}
partner.name = this.name.value;
partner.phone = this.phone.value;
partner.taxNumber = this.taxNo.value;
partner.email = this.phone.value;
partner.address = this.address.value;
this.partnerService.addPartner(partner).subscribe(data =>{
this.currentPartner = data //Partner from server with id
this.partners.push(data) //some list with other Partners
});
}
currentPartner:Partner//宣布合作伙伴
savePartnerAndCloseModal(模式:任意){
modal.hide()
var partner={}
partner.name=this.name.value;
partner.phone=this.phone.value;
partner.taxNumber=此.taxNo.value;
partner.email=this.phone.value;
partner.address=this.address.value;
this.partnerService.addPartner(partner.subscribe)(数据=>{
this.currentPartner=数据//来自id为的服务器的合作伙伴
this.partners.push(data)//与其他合作伙伴的一些列表
});
}
业务合作伙伴
//合作伙伴的其他属性(输入)
还有什么问题?我不知道“角度”的说法:“如果currentPartner
为空,则显示占位符值,否则显示currentPartner
的值”?您非常接近,您可以使用ng模板
和ng容器
根据currentPartner
切换UI
<ng-container *ngIf="currentPartner; else placeholderPartner">
<!-- shows when currentPartner is defined -->
</ng-container>
<ng-template #placeholderPartner>
<!-- shows when currentPartner is null/undefined -->
</ng-template>
谢谢!我刚刚意识到,若部分是ng容器,否则部分是ng模板。再次感谢!我很挣扎,我的第一个web项目是java开发。。。
<ng-container *ngIf="currentPartner; else placeholderPartner">
<!-- shows when currentPartner is defined -->
</ng-container>
<ng-template #placeholderPartner>
<!-- shows when currentPartner is null/undefined -->
</ng-template>