[武汉|结业弟子]JS-刘平|2019年12月10日的日报-技能树.IT修真院

发表于： 2019-12-10 20:46:06

1 1222

今天完成的事情

解决了昨天编辑/查看界面疯狂报错的问题

之前的问题在于我在html中img标签内的src关联的是一个对象内的属性，这样相当麻烦，因为动不动就某个属性没有获取成功，因为获取老师的方法是一个异步任务，img标签不能再异步方法完成前展示其获取到的老师信息，导致img标签一直报错说图像找不到，这是因为异步任务是后面才完成的，老师的数据也是后面才获取到的，然后麻烦了大佬一上午的时间，教我怎么做。

既然获取老师是一个异步的任务，那我们可以把一个页面初始化时的执行任务写成一个回调函数传入获取老师的方法内，如下‘

  //获取老师列表
  getTeacher(callback?) {
    this.ser.getTeacher().subscribe((res: any) => {
      this.teacherList = res.list;
      console.log(this.teacherList);
      typeof callback == "function" && callback();
      this.teacherList.forEach((item, index) => {
        this.teacherObj[item.teacher_id] = item;
      })
    })
  }

然后在页面初始化的时候，执行获取老师数据的方法，首先通过url获取到传递过来的参数，判断是编辑、查看页面，还是新增页面。如果是查看、编辑页面，就获取视频列表的数据，并通过你变量num的存在来锁定所有属性使其不可修改。如果是新增页面，则下拉框给一个默认值展示，然后判断获取到的老师列表的数组长度，如果大于0，就是有数据，取第一个数据当作老师信息的展示数据。但是这里并不算完善，因为只能展示老师的图像，老师的姓名下拉框内的数据还不知道怎么显示。

  //初始化函数
  ngOnInit() {
    this.actRou.queryParamMap.subscribe((res: any) => {
      this.getTeacher(() => {
        if (res.params.id) {
          //查看、编辑
          this.getVideo(res.params.id);
          this.num = res.params.num;
          this.showUploadList.showRemoveIcon = this.num ? false : true;
        } else {
          //新增
          this.dataObj = {
            grade: "1",
            subject: "1",
            classification: "1",
          };
          this.teacherList.length > 0 && (this.tea_id = this.teacherList[0].teacher_id);
        }
      })
    })
  }

今天遇到的问题

全都是问题，一直在改bug

今天的收获

回调函数

今天再次学习到了回调函数的强大之处，由于获取老师列表这个方法是一个异步的方法，页面初始化的时候需要读取其获取到的老师列表数据，但是一直报错，就是因为这个异步的原因，然后大佬教我用回调函数的方法，将其他操作写成一个函数传入这个方法内，这样就解决了异步带来的问题

表单验证中的选项禁用

之前的选项使用禁用属性disabled，我都是给一个变量，然后动态修改变量的布尔值，来切换其状态，今天我也是这么做的，但是当学习了大佬交给我的方法后，才知道我是多么的蠢，因为我是在查看页面才需要禁用所有选项，使其只能查看不能修改，然后这里我又在url传入了一个num变量作为区别编辑和查看页面的属性，那么这里我就不需要定义别的变量来修改选项的禁用属性，而是可以直接通过num这个变量来判断，如果num存在，那么必定是查看页面，这里每个选项内就可以直接使用[disabled="num"],因为disabled的属性只能是布尔值，所以这里会基于Number()方法转换，如果num存在，则选项禁用，如果不存在，则num就是undefined，而undefined通过Number()转换后就是true，那么选项就禁用了

明天的计划

开始做复盘任务前台视频模块

返回列表

【任务12】 [武汉|结业弟子]JS-刘平 | 2019年12月10日 的日报 中品

评论

分享到

【任务12】 [武汉|结业弟子]JS-刘平 | 2019年12月10日的日报中品