building - house - edit组件功能实现的总结

问题描述:
输入为类型为House的实体house,
点击编辑后,弹出编辑名称对话框及确认按钮。
当house存在ID时,点击确认时,触发后台的更新操作,更新完成后关闭对话框。
当house不存在ID时,点击确认后,仅仅关闭对话框,不触发后台的操作。

解决步骤:

一、首先是此次任务的实现逻辑,并不是和以前从后台的模拟API获取数据进行编辑的逻辑相同。而是利用到了父子组件(@input,@output),在子组件里引用了父组件中定义好的变量(此issue中引用的是house:House)。@input的作用是定义模块输入,是用来让父级组件向子组件传递内容。

   在子组件中将需要传递给父组件的变量用@input()修饰。然后子组件ts文件import中还需添加Input。
   import {Component, Input, OnInit, Output} from '@angular/core';
   house是父组件中的一个变量,复制给house,然后在子组件中用@Input() house来接收传过来的值,名称必须一致
   @Input()
   house: House;

二、其次是在编辑界面引入了模态框的概念,为我们编辑的时候提供更加简洁的方法。在解决问题的时候,首先我们在测试层引入house变量,然后通过在C层中调用此变量,初始化的时候给表单进行赋值(在初始化的过程中进行了验证,首先是断言house变量的存在,然后是对我们需要修改的house.name的断言)。

   模态框(Modal)是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

building - house - edit组件功能实现的总结_第1张图片

   断言(验证):在引入@input 之后,将父子组件联系到一起后。(输入为类型为House的实体house)这一点问题已解决。接着我们要对输入的house进行验证。也就是validateHouse(house: House)首先是要对house,其次是对house.name这两个进行断言,其必须通过校验才可以正常初始化使表单组中增加一个表单控制器。
   validateHouse(house: House): void {
   Assert.isObject(house, 'some properties must be object');
   Assert.isNotNullOrUndefined(house.name, 'some properties must be passed'); }

三、接着对于模态框的开启与关闭,写了两个方法,一个是用于开启的onToggleModal(),一个是用于关闭的onCloseModal()。开启的方法很好理解,主要在于关闭的这个方法,需要对输入框显示的house.name进行判断。当我们在编辑时,如果修改的过程中突然放弃修改,点击关闭,那么在下次打开时修改界面的显示值还应该是最原始的初始值。这里就是用到了setValue()方法。(解决关闭的bug。)
在V层我们调用这两个方法

   
{{this.house.name}}

building - house - edit组件功能实现的总结_第2张图片

四、最后则是onSubmit()方法。这里就是题目的核心代码,采用了if判断对house是否存在id进行判断,然后根据存在与否进行相应的更新并保存。(解决编辑1-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('获取到id',this.house.id);
  console.log('打印数组',formGroup.value);
  const newHouse = new House({
    name: this.formGroup.get(this.formKeys.name).value as string,
  });
  this.houseService.update(this.house.id, newHouse)
    .subscribe(
      ()=>console.log('保存成功'),
      error => console.log('保存失败', error));
  this.showModal = false; //当不存在时,点击保存以后直接关闭
  this.house.name = this.formGroup.value.name;
}
}

总结:

这次领取的issue与以往领取的普通编辑不同,在开始解决问题的时候,由于没有与老师进行充分交流,所以陷入了误区,在前两天走了弯路。后来在进行交流以后对自己的功能需求与逻辑有了清楚的认识以后,在老师的帮助下一步步解决了问题。
在与原来编辑功能的逻辑进行了对比以后,此issue最为关键的地方就是在于引入了子组件和采用了模态框技术。在单元测试中创建变量,来模拟数据的传入,在子组件中引入变量。然后进行相应的初始化、更新等一系列相关操作。在V层通过调用了onCloseModal()、onSubmit()等方法最终实现了预期功能。

你可能感兴趣的