当前位置: 首页 > Web前端 > HTML

建筑-房屋-编辑组件功能实现总结

时间:2023-04-02 13:00:14 HTML

问题描述:输入的是House类型的实体房屋,点击编辑后会弹出编辑名称对话框和确认按钮。当房子里有ID,点击确定时,触发后台更新操作,更新完成后关闭对话框。当屋内无ID时,点击确认后,仅关闭对话框,不触发后台操作。解决步骤:1、首先,这个任务的实现逻辑和之前从后台模拟API获取数据进行编辑的逻辑不一样。而是使用父子组件(@input,@output),在子组件中引用父组件中定义的变量(本期引用的是house:House)。@input的作用是定义模块输入,用于让父组件向子组件传递内容。在子组件中,需要传递给父组件的变量用@input()修饰。那么子组件ts文件导入需要添加Input。从'@angular/core'导入{Component,Input,OnInit,Output};house是父组件中的一个变量,复制到house中,然后在子组件中使用@Input()house来接收传递的值,name必须和@Input()house:House保持一致;其次,其二是在编辑界面中引入了模态框的概念,为我们在编辑时提供了更加简洁的方法。解题时,首先我们在测试层引入house变量,然后在C层通过调用这个变量,在初始化的时候给form赋值(在初始化过程中验证,先断言house变量的存在,然后是我们需要修改的house.name断言)。模态框(Modal)是叠加在父窗体上的子窗体。通常目的是显示来自单独源的内容,该源可以在不离开父窗体的情况下进行一些交互。子表单可以提供信息交互等。断言(validation):引入@input后,将父子组件链接在一起后。(输入的是House类型的实体house)这个问题已经解决了。接下来,我们需要验证输入的房子。也就是说,validateHouse(house:House)必须先asserthouse,然后是house.name,必须通过校验才能正常初始化,并在formgroup中添加一个formcontroller。validateHouse(house:House):void{Assert.isObject(house,'某些属性必须是对象');Assert.isNotNullOrUndefined(house.name,'某些属性必须传递');三、然后对于模态框的On和off,写了两个方法,一个是onToggleModal()打开,一个是onCloseModal()关闭。打开方法很容易理解。主要原因是关闭方法需要判断输入框显示的house.name。我们在编辑的时候,如果在修改过程中突然放弃修改,点击关闭,那么下次打开修改界面时,显示的值应该是最原始的初始值。这是使用setValue()方法的地方。(解决已关闭的bug。)在V层我们调用这两个方法

{{this.house.name}}
Close四、最后是onSubmit()方法。这里是题目的核心代码,用if判断房子里是否有id,然后根据是否存在更新保存。(解决edit1-1301的问题,初始随机生成的name和更新后的house.name显示为人为修改)onSubmit(formGroup:FormGroup):void{if(this.house.id==null)//判断house.id是否存在{this.formGroup.get(this.formKeys.name).setValue(this.house.name);this.showModal=false;//如果不存在,直接点击保存关闭}else{//当house.id存在时,根据输入值保存console.log('Getid',this.house.id);console.log('打印数组',formGroup.value);constnewHouse=newHouse({name:this.formGroup.get(this.formKeys.name).valueasstring,});this.houseService.update(this.house.id,newHouse).subscribe(()=>console.log('保存成功'),error=>console.log('保存失败',error));this.showModal=false;//如果不存在,点击save后直接关闭this.house.name=this.formGroup.value.name;}}总结:这次收到的issue和以往普通编辑收到的不一样。开始解决问题的时候,因为没有和老师充分沟通,前两天陷入了误区,走了弯路。后来经过交流,对自己的功能需求和逻辑有了清晰的认识,在老师的帮助下一步步解决了问题。对比原编辑功能的逻辑,本期最关键的部分是子组件的引入和模态框技术的使用。在单元测试中创建变量模拟数据的传入,在子组件中引入变量。然后进行相应的初始化、更新等一系列相关操作。在V层,通过调用onCloseModal()、onSubmit()等方法最终实现了预期的功能。