1. Obtain the value of the form form
FormBuilder is used in Angular to instantiate tables to simplify the creation of FormGroup,FormControl, or FormArray instances. It reduces the amount of style code required to build complex forms.
FormGroup aggregates the values of FormControl into an object whose key is the name of each space. When the Form Group is instantiated, a set of child components are passed in as the first argument. Each subspace registers itself. FormGroup passes in the array key as the FormControlName.
<nz-select
id=”codetype”
formControlName=”codeType”
nzFor=”codeType”
NzPlaceHolder =” Please select”
(ngModelChange)=”setCodes($event)”
>
<nz-option nzLabel=” nzValue=”1″></nz-option>
<nz-option nzLabel=” nzValue=”2″></nz-option>
<nz-option nzLabel=” an exchange code that can be used multiple times (possibly with a limited number of times), multiple times with “nzValue=”3”></nz-option>
<nz-option nzLabel=” nzValue=”4″></nz-option>
</nz-select>
</nz-form-control>
this.validateForm = this.fb.group({
goodsName: [null, [Validators.required]],
codeType: [null, [Validators.required]],
usenumber: [null, [Validators.required]],
currency: [null, [Validators.required]],
cardtag: [null, [Validators.required]],
});
const data = this.validateForm.value.codeType; // Get the value of each drop-down box
2. When passing in parameters, pay attention to the data type of the parameters
In this project, the Id is a string of characters, but the request expects the parameter to be passed in as an array, so you need to convert the string Id to an array. Like a code.
const arr: Array<string> = [];
arr.push(id); Changes the array and returns the length of the array
this.invitationCodeService.getCodeList(this.pageIndex, this.pageSize).subscribe(res => {
const { total, list } = res.data;
this.total = total;
this.invitateCodeList = list.map(item => {
const { desc, type, binds, created_at, _id } = item;
return {
name: desc,
type,
coin: binds,
createtime: created_at,
id: _id,
};
});
});
Es6 structure assignment, map traverses the array and returns a new array.
4. Structural directives
Configuration directives shape or reshape the STRUCTURE of the DOM by adding, deleting, and manipulating their host elements. Any instruction with an * is a structural instruction.
* The ng-if directive is used to remove HTML elements when the expression is false. The default is false, and if the result of the if statement is true, the remove element is added and displayed. The *ngif directive is different from the *nghide directive, which controls the display and hiding of elements by controlling CSS attributes, while *ngif removes elements from the DOM.
<nz-form-item *ngIf=”isShow” nzFor=”Codes”></nz-form-item>
this.isShow = data === 3 ? true : false;
*ngFor is an Angular repeater directive. Used to iterate over an array, it overwrites its host element for each item in the array.
<tr><td *ngFor=” let item of items”>{{item}}</td></tr>
If (id:1,birds:{{},{},{},{},{}},{}},{}}, span, span, span, span, span)
> #5. Es6 string concatenation: ‘string’ + ‘string’, variable is not wrapped. Template string.
public getCodeList(page, pageSize): Observable<any> {
return this.http.get(‘/invitation_code/model/list? page=’ + page + ‘&pageSize=’ + pageSize);
}
6. Component values: INPUT,output
##input
Eg: Bind the property in the parent component, inject the property into the child component via @input, and then the child component will own the property of the parent component.
Parent component: Binding properties
<ng-leaflet-shutter #shutterCmp [compareLayers]=”compareLayers ></ng-leaflet-shutter>
Child component injection properties:
@Input() compareLayers
##output
A decorator that marks a class field as an output property and provides configuration metadata. Any DOM property that is bound to an output property is automatically updated by Angular during change detection. You can provide an optional template-only name that will be mapped to the bindable property when the component is instantiated. By default, the name of the output binding is the original name of the binding property. Use the same as input.
7. The git operation
Git checkout -b dev creates the branch
Git branch -d dev Deletes a branch
Git add
Git commit -m “commit code to local bin
Git push commits code
Git pull origin dev Specifies the code to pull a remote branch
Git status checks for code changes
Git log Displays code commit logs
8. Conclusion:
Component functionality in Angular is single, encapsulating a multi-use functionality into a single component. Put the data operation in service, and put the data needed in module under core.