对象转Observable
import 'rxjs/add/observable/of'
Observable.of(1,2,3)
http请求后做处理
import {map, catchError} from 'rxjs/operators'
this.http.get(url).pipe(
map(res => {
//do something
localStorage.setItem('xxxx', JSON.stringify(res))
//return
return res
}),
catchError(err => {
return Observable.throw(err);
})
)
同步多个http请求
let http1 = this.http.get('url')
let http2 = this.http.get('url')
let http3 = this.http.get('url')
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/zip'
Observable.forkJoin(http1, http2, http3).subscribe((res) => {
//执行一次,多个对象
console.log(res)
})
Observable.zip(http1, http2, http3).subscribe(([res1, res2, res3]) => {
//执行一次,对象分开
console.log(res1)
console.log(res2)
console.log(res3)
})
Observable.zip(http1, http2, http3).subscribe((res) => {
//执行一次,多个对象
console.log(res)
})
Observable.merge(http1, http2, http3).subscribe((res) => {
//执行多次,每次一个对象
console.log(res)
})
异步操作中返回Observable
import {Subject} from 'rxjs/Subject';
chooseImage(): Observable<any> {
const subject = new Subject();
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
const localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
subject.next(localIds)
}
});
return subject.asObservable()
}
微信浏览器中上传图片之后不触发图片的load事件
需要在改变改变图片的src,或者是新增img,或者是新增div(背景)之后,通过调用如下方法重新检测:
import {ChangeDetectorRef} from '@angular/core';
constructor(private cd: ChangeDetectorRef) {}
if (!this.cd['destroyed']) {
this.cd.detectChanges();
}
自组件如何改变父组件样式?
如改变最外层html标签的样式,可以加 ::ng-deep 实现:
::ng-deep html {
height: 100%;
background-image: radial-gradient(circle, #1280e1 0%, #002069 100%);
}
表单中的字段类型是数组
<form [formGroup]="form" (ngSubmit)="submit()">
<table>
<tr>
<th>name</th>
<td>
<input type="text" formControlName="name">
</td>
</tr>
<tr>
<th>list</th>
<td>
<button type="button" (click)="add()">+</button>
</td>
</tr>
<tr *ngFor="let item of list.controls;let i = index">
<td>
<button type="button" (click)="remove(i)">-</button>
</td>
<ng-container [formGroup]="item">
<td>
<input type="text" formControlName="key">
</td>
<td>
<input type="text" formControlName="value">
</td>
</ng-container>
</tr>
<tr>
<td>
<button type="submit">提交</button>
</td>
</tr>
</table>
</form>
import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
form: FormGroup;
constructor(
private fb: FormBuilder,
) {
}
ngOnInit(): void {
this.form = this.fb.group({
name: [],
list: this.fb.array([])
});
}
get list() {
return this.form.get('list') as FormArray
}
add() {
this.list.push(this.fb.group({
key: [],
value: [],
}))
}
remove(idx) {
this.list.removeAt(idx)
}
submit() {
for (const i in this.form.controls) {
this.form.controls[i].markAsDirty();
this.form.controls[i].updateValueAndValidity();
}
console.log(this.form.value)
}
复制文本
copy(item: string): void {
const el = document.createElement('textarea');
el.value = item;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}