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）是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

   断言（验证）：在引入@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层我们调用这两个方法

   <h6>{{this.house.name}}<i class="fa fa-pen text-primary" (click)="onToggleModal()"></i></h6>
   <button type="button" class="btn btn-default"  (click)="onCloseModal()">关闭</button>

四、最后则是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()等方法最终实现了预期功能。