对象转Observable

1import 'rxjs/add/observable/of'
2
3Observable.of(1,2,3)

http请求后做处理

1import {map, catchError} from 'rxjs/operators'
2
3    this.http.get(url).pipe(
4        map(res => {
5          //do something
6          localStorage.setItem('xxxx', JSON.stringify(res))
7          //return
8          return res
9        }),
10        catchError(err => {
11          return Observable.throw(err);
12        })
13      )

同步多个http请求

1    let http1 = this.http.get('url')
2    let http2 = this.http.get('url')
3    let http3 = this.http.get('url')
4
5
6import 'rxjs/add/observable/forkJoin';
7import 'rxjs/add/observable/merge';
8import 'rxjs/add/observable/zip'
9
10
11    Observable.forkJoin(http1, http2, http3).subscribe((res) => {
12      //执行一次，多个对象
13      console.log(res)
14    })
15
16
17    Observable.zip(http1, http2, http3).subscribe(([res1, res2, res3]) => {
18      //执行一次，对象分开
19      console.log(res1)
20      console.log(res2)
21      console.log(res3)
22    })
23
24    Observable.zip(http1, http2, http3).subscribe((res) => {
25      //执行一次，多个对象
26      console.log(res)
27    })
28
29
30    Observable.merge(http1, http2, http3).subscribe((res) => {
31      //执行多次，每次一个对象
32      console.log(res)
33    })

异步操作中返回Observable

1import {Subject} from 'rxjs/Subject';
2
3chooseImage(): Observable<any> {
4    const subject = new Subject();
5    wx.chooseImage({
6      count: 1, // 默认9
7      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
8      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
9      success: function (res) {
10        const localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
11        subject.next(localIds)
12      }
13    });
14    return subject.asObservable()
15  }

微信浏览器中上传图片之后不触发图片的load事件

需要在改变改变图片的src，或者是新增img，或者是新增div(背景)之后，通过调用如下方法重新检测：

1import {ChangeDetectorRef} from '@angular/core';
2
3constructor(private cd: ChangeDetectorRef) {}
4
5if (!this.cd['destroyed']) {
6   this.cd.detectChanges();
7}

自组件如何改变父组件样式？

如改变最外层html标签的样式，可以加 ::ng-deep 实现：

1::ng-deep html {
2  height: 100%;
3  background-image: radial-gradient(circle, #1280e1 0%, #002069 100%);
4}

表单中的字段类型是数组

1<form [formGroup]="form" (ngSubmit)="submit()">
2  <table>
3    <tr>
4      <th>name</th>
5      <td>
6        <input type="text" formControlName="name">
7      </td>
8    </tr>
9
10    <tr>
11      <th>list</th>
12      <td>
13        <button type="button" (click)="add()">+</button>
14      </td>
15    </tr>
16
17    <tr *ngFor="let item of list.controls;let i = index">
18      <td>
19        <button type="button" (click)="remove(i)">-</button>
20      </td>
21      <ng-container [formGroup]="item">
22        <td>
23          <input type="text" formControlName="key">
24        </td>
25        <td>
26          <input type="text" formControlName="value">
27        </td>
28      </ng-container>
29    </tr>
30
31    <tr>
32      <td>
33        <button type="submit">提交</button>
34      </td>
35    </tr>
36  </table>
37</form>
38
39
40
41
42import {Component, OnInit} from '@angular/core';
43import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
44
45  form: FormGroup;
46
47  constructor(
48    private fb: FormBuilder,
49  ) {
50  }
51
52
53  ngOnInit(): void {
54    this.form = this.fb.group({
55      name: [],
56      list: this.fb.array([])
57    });
58  }
59
60  get list() {
61    return this.form.get('list') as FormArray
62  }
63
64  add() {
65    this.list.push(this.fb.group({
66      key: [],
67      value: [],
68    }))
69  }
70
71  remove(idx) {
72    this.list.removeAt(idx)
73  }
74
75  submit() {
76    for (const i in this.form.controls) {
77      this.form.controls[i].markAsDirty();
78      this.form.controls[i].updateValueAndValidity();
79    }
80    console.log(this.form.value)
81  }

复制文本

1copy(item: string): void {
2  const el = document.createElement('textarea');
3  el.value = item;
4  el.setAttribute('readonly', '');
5  el.style.position = 'absolute';
6  el.style.left = '-9999px';
7  document.body.appendChild(el);
8  el.select();
9  document.execCommand('copy');
10  document.body.removeChild(el);
11}