Brotherc 博客

Angular

Angular

# 常用操作

# angular遍历map

html:

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>
1
2
3
4
5

cpmponent:

myMap : Map<string, boolean>;
for(let key of myMap.keys()) {
   console.log(key);
   console.log(myMap.get(key));
}
1
2
3
4
5
Object.keys(myMap).map( key => {
    console.log('key: ' + key);
    console.log('value: ' + result[key]);
});
1
2
3
4
for (const [key, val] of map) {
  console.log(key);
  console.log(val);
}
1
2
3
4

参考：
https://stackoverflow.com/questions/48187362/how-to-iterate-using-ngfor-loop-map-containing-key-as-string-and-values-as-map-i/48187637 (opens new window)
https://stackoverflow.com/questions/37699320/iterating-over-typescript-map (opens new window)

# angular中html界面的if else 表示

<div *ngIf="someCondition; else falsyTemplate">
  <h1>Condition Passed!</h1>
</div>

<ng-template #falsyTemplate>
  <h1>Condition Failed!</h1>
</ng-template>
1
2
3
4
5
6
7

# angular的html根据条件显示样式

html：

<div [class.hide]="someCondition"></div>
1

css:

.hide {
    display: none;
}
1
2
3

# 在父组件中直接调用子组件的函数

父组件html：

<app-child-form #childForm></app-child-form>
1

父组件component：

    @ViewChild('childForm')
    childForm: ChildFormComponent;

    f(): void {
        this.childForm.f();
    }
1
2
3
4
5
6

子组件component：

    f(): void {
        console.log('child component');
    }
1
2
3

# 日期格式转换

java:

LocalDateTime time
1

angular component：

time: Date
1

html:

{{time| date:'yyyy-MM-dd HH:mm:ss'}}
1

# 在组件中使用自定义的管道

pipe:

@Pipe({
    name: 'xxx'
})
export class XxxPipe implements PipeTransform {
    transform(value: AlarmRule, args?: any): any {
      // ...
    }
}
1
2
3
4
5
6
7
8

Component：

@Component({
  selector: 'xxx',
  templateUrl: 'xxx.html',
  styleUrls: ['xxx.css'],
  providers: [ XxxPipe ]
})
export class XxxComponent {
  constructor(private xxx: XxxPipe) {}
  // ...

  f(value) {// 调用
    this.xxx.transform(value);
    // ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考：
https://alligator.io/angular/using-pipes-in-component-class/ (opens new window)

# 重置表单

html:

<form nz-form [formGroup]="form">
</form>
1
2

Component:

export class FormComponent implements OnInit {
    form: FormGroup;

    clearForm() {
        this.form.reset();
    }
}
1
2
3
4
5
6
7

参考：
https://stackoverflow.com/questions/36655922/resetting-a-form-in-angular-2-after-submit (opens new window)

# 离开组件时销毁定时器

export class xxxComponent implements OnInit, OnDestroy {
    timer: any;

    ngOnInit() {
        this.timer = setInterval(() => {
            console.log('轮询');
        }, 2000);
    }

    ngOnDestroy() {
        clearInterval(this.timer);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

参考：
https://stackoverflow.com/questions/35561320/end-interval-when-route-changes-in-angular-2/35561450 (opens new window)

# img展示Blob类型数据

component:

export class XxxComponent {
    rqcode: any;

    getRqCode() {
        this.xxxService.getRqCode().subscribe(resp => {
            // blob转base64
            const reader = new FileReader();
            reader.readAsDataURL(resp);
            reader.onloadend = () => {
                this.rqcode = reader.result;
            };
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

html:

<img style="height: 200px; width: 200px;" [src]="rqcode">
1

参考：
https://stackoverflow.com/questions/7650587/using-javascript-to-display-a-blob/44069294 (opens new window)
https://blog.csdn.net/fangquan1980/article/details/80675369 (opens new window)
https://stackoverflow.com/questions/18650168/convert-blob-to-base64 (opens new window)

Augular-样式与交互