angularjs tricky

1 语法：

“===”表示 value相同，类型相同

2 名称解释

2.1: ng-container.
使用 ngIf,ngFor都需要在div,span,label等标签中实现
比如： <div *ngIf="_isDevMode" class="form-debug">
ng-container可以代替它们.而ng-container在运行时消失.
这样减少了div,label等标签的大量增加
参考:
https://zhuanlan.zhihu.com/p/24781585
https://segmentfault.com/a/1190000009175508

2.2: ng-template
有两个作用.
2.2.1： 使用ng-template可以在ts文件中写html.ng-template和@ViewChild连用
比如: <ng-template #saveButtonTemplate>
<table>
...
</table>
</ng-template>

export class PagTest implements OnInit,AfterViewInit,OnDestroy {
@ViewChild('saveButtonTemplate') saveButtonTemplate: TemplateRef<any>;
......
}
给template起名saveButtonTemplate,用ViewChild加载.template中的html就work了.
2.2.2：和ng-container 一样.语法不同而已
<ng-template ngFor let-itemRow [ngForOf]="showItems" let-i="index">
<ng-container *ngFor="let itemRow of showItems" let i="index">

3 数据绑定：单向绑定，双向绑定

3.1 单向绑定：.ng-bind="name"和{{name}}：单向显示$scope绑定的数据，ng-bind为angularjs自带显示数据指令

<h2 ng-bind="name"></h2>

<h1>{{name}}</h1>

3.2 双向绑定:ng-model="name"：双向数据绑定，文本框值改变，name值就改变。

例如 <mat-radio-group class="plcm-whitelist-radio" [(ngModel)]="ipType">
<mat-radio-button value="isIPv4">{{IPV4 | translation}}</mat-radio-button>
<mat-radio-button value="isIPv6">{{IPV6 | translation}}</mat-radio-button>

</mat-radio-group>

ipType是双向绑定，ipV4是单向绑定 (ipV4 is final string “IPV4”)

4 ngModel,[ngModel] and [(ngModel)] 区别
注意第三项比第二项多个()
[ngModel]="user.name" //变量单向绑定
友情提示：[ngModel] 是单向绑定，当表单中 name 输入框的值改变时，不会同步更新 this.user.name
[(ngModel)]=ngModelChange)="user.name = $event" //和变量双向绑定

举例分析参见: https://segmentfault.com/a/1190000009037539

5 ngModelChange 和 valueChanges 区别
两种双向绑定的方法，都是为各自的方法监听value的变化,处理value的变化
ngModel是在控件上直接绑定。然后用ngModleChange处理监听。
valueChanges是通过form，formGroup绑定控件。然后用subscribe 处理监听
https://www.cnblogs.com/dennis0525/p/7631301.html

6
http://www.runoob.com/try/try.php?filename=try_ng_model_status

描述		属性类
$valid	ng-valid	Boolean false (如果输入的值是合法的则为 true)。比如email的合法性检查
$invalid	ng-invalid	Boolean true 与valid相反
$dirty	ng-dirty	Boolean 如果值改变则为 true)。
$pristine	ng-pristine	Boolean false (如果值改变则为 false)。与dirty 相反

7 事件：onChange,onBlur
onblur： 只要input失去焦点就会触发 onblur事件。不管input框里面的值是否改变，都会触发事件。
onchange：只有当input框里面的值发生变化才会执行，这里加了值判断
前者是任何一个字符输入都会触发，后者是整个框输入完成才触发.
前者的例子是Richard中error 提示消除,在框中，改动字符仍然是error，当将最后一个字符也改对了，这时是正确答案，则error 提示消失。
所以error 提示检测是通过每个字符变化检测的。
后者的例子是verify password，输入完password，鼠标焦点移除input，则发送rest验证

8
下面是rest使用方法,(request/respond处理)相当于java 打包message request/handle message respond
this._restExec.queryRecentCall用于rest发送;next用于rest响应处理
this._restExec.queryRecentCall(pCurDateTime.getTime().toString(_radix)).subscribe({
next: (data) => {
if (data.length > 0) {
this._clearRecentCallsDisabled = false;
} else {
this._clearRecentCallsDisabled = true;
}
},

rest 形式(待条件用?多个条件用&)
/rest/calllog/queries/id?start=1&limit=100

9
css: 获取控件css
Grome debug 模式:element--arraw选中控件--可以在右边的方框调边距---然后将value加到code中，<div style="margin-left: 15px">

10
formControlName = ngModel
<div>用户名：<input formControlName="nickname" name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
<div>用户名：<input ngModel name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
没有formcomponent.
====================================================
other:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

常用快捷键
ctrl+shift+O 优化（去掉多余头文件)

ctrl+shift+F 统一格式

常用第三方工具: postman

html:这么debug，ts的变量 <div *ngFor="let opti of _videoDialingOrderCtl.options"> {{opti}} 11 {{opti.value}} 222 {{opti.tag}} </div> this._audioDialingOrderPreference1Ctl.options[0].val for ts set/get this._audioDialingOrderPreference1Ctl.options[0].tag for show in GUI; ajax: // 使用方法，但是这种方法已经过时了 doUsbCaptureStartRequest:function( filter ) { var ajaxOption = { url:Draco.urlPrefix + '/rest/pcap',method:'POST',params:{ action:'startUsbCaptureWithFilter',filter:filter },scope:me,success:me.onUsbCaptureStartSuccess,failure:me.onUsbCaptureStartFailed }; //一段ajax request，回来的respond通过回调函数处理， success: call onUsbCaptureStartSuccess,failure call onUsbCaptureStartFailed 方法 现在改成用本质http.get or this.http.post getJson(uri: string): Observable<any> { return this.httpGetJson(uri,false); } protected httpGetJson(url: string,cache: boolean = true): Observable<any> { this.http.get(url,options) }