[Angular2+]~2019/1/30总结/模板对select或option对与boolean的取值/json的map遍历/assign对象合并丢失值/深拷贝

.取一个json，里面的key-value有些value是数组，或者boolean，或者string，要判断它们分别是什么给不同的html样式

1.遍历

  for (const key of Object.keys(res))

2.select（如果不想点击option后变成string而是依然是boolean）

 <select name="Boolean"
                      (change)="test(item.key,item.value)"
                      [(ngModel)]="item.value"
                      *ngIf="filtersBoolean(item.value)">
                <option  [ngValue]="item.value">{{item.value}}</option>
                <option  [ngValue]="!item.value">{{!item.value}}</option>
              </select>

3.过滤的细节（如判断是否是数组/number/boolean）

  <label>
              <select name="Boolean"
                      (change)="test(item.key,item.value)"
                      [(ngModel)]="item.value"
                      *ngIf="filtersBoolean(item.value)">
                <option  [ngValue]="item.value">{{item.value}}</option>
                <option  [ngValue]="!item.value">{{!item.value}}</option>
              </select>
            </label>
            <input type="text"
                   (change)="test(item.key,item.value)"
                   [(ngModel)]="item.value"
                   *ngIf="filtersString(item.value)"
                   placeholder="{{item.value}}"
                   value="{{item.value}}"
                   required="required">
            <input type="text"
                   (change)="test(item.key,item.value)"
                   [(ngModel)]="item.value"
                   *ngIf="filtersInt(item.value)"
                   placeholder="{{item.value}}"
                   value="{{item.value}}"
                   required="required">

          </div>

  filtersBoolean(value) {
    return (typeof value) === 'boolean';
  }

  filtersString(value) {
    return (typeof value) === 'string' || Object.prototype.toString.call(value) === '[object Array]';
  }

  filtersInt(value) {
    return (typeof value) === 'number';
  }

  test(key, value) {
    console.log(key + ':' + value);
  }

  public returnBoolean(value) {
    return value;
  }

4.关于settimeout 0,

神迹啊- -，我的理解是页面渲染+请求都完成后才好调用这样，就不会出现取值不到的情况了

虽然有点啰嗦

 setTimeout(() => {
        const editChartObj = Tool.echart.init(this.editChart.nativeElement);
        editChartObj.setOption(this.currentOption);
        this.currentChart.setOption(this.currentOption);
      }, 0);

5.关于JS对象合并

一开始是总属性合并了一个子属性

形如A{a:{.c{..}..},b{...},c{..}}合并了一个B{a{.c{xx}.}}

然后发现A合并了c之后A里面的子属性变为只有B那么多了，其实应该是A里没有B的属性的话就添加进去

解决方法就是不要用这个方法，它只是合并根属性..

所以自己写一个深拷贝比较好

  isObject(item) {
    return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
  }

// 对象合并深拷贝
  mergeDeep(target, source) {
    if (this.isObject(target) && this.isObject(source)) {
      for (const key in source) {
        if (this.isObject(source[key])) {
          if (!target[key]) {
            Object.assign(target, {[key]: {}});
          }
          this.mergeDeep(target[key], source[key]);
        } else {
          Object.assign(target, {[key]: source[key]});
        }
      }
    }
    return target;
  }