Ng-zorro uses Form form as query condition to load the table when the form form flashes

[picture]
related code
< div class= "carInfo-box" >
<div class="code-box">
    <form nz-form [nzLayout]=""inline"">
        <nz-form-item>
            <nz-form-control>
                <input nz-input placeholder="" name="carNo" [(ngModel)]="carListParam.carNo" type="text">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <input nz-input placeholder="" name="vinNo" [(ngModel)]="carListParam.vinNo" type="number">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <nz-select style="width: 171px;" nzAllowClear nzShowSearch [(ngModel)]="carListParam.brandId" (ngModelChange)="getCarModelName(2,carListParam.brandId)"
                    name="brandId" nzPlaceHolder="">
                    <nz-option *ngFor="let brandId of Carbrand" [nzValue]="brandId.value" [nzLabel]="brandId.label"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <nz-select style="width: 171px;" nzAllowClear nzShowSearch [(ngModel)]="carListParam.seriesId" name="seriesId" nzPlaceHolder=""
                    (ngModelChange)="getCarModelName(3,carListParam.seriesId)">
                    <nz-option *ngFor="let seriesId of Cartype" [nzValue]="seriesId.value" [nzLabel]="seriesId.label"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <nz-select style="width: 171px;" nzAllowClear nzShowSearch [(ngModel)]="carListParam.modelId" name="modelId" nzPlaceHolder="">
                    <nz-option *ngFor="let modelId of Carstyle" [nzValue]="modelId.value" [nzLabel]="modelId.label"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <button nz-button nzType="primary" (click)="getCarInfoListData()"></button>
                <button nz-button nzType="default"></button>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>
<div class="code-box">
    <div style="margin-bottom: 20px; text-align:right">
        <button style="width:100px" nz-button [nzSize]=""large"" nzType="primary"></button>
        <button style="width:100px" nz-button [nzSize]=""large"" nzType="default"></button>
    </div>
    <nz-table -sharprowSelectionTable [nzData]="dataSet" [nzTotal]="carInfoTotal" [nzFrontPagination]="false" nzShowQuickJumper nzShowSizeChanger
        [nzPageSizeOptions]="pageSize" [(nzPageSize)]="carListParam.pageSize" [(nzPageIndex)]="carListParam.pageIndex" (nzPageIndexChange)="PageIndexChange($event)"
        (nzPageSizeChange)="PageSizeChange($event)" [nzScroll]="{ x:"1600px"}">
        <thead>
            <tr>
                <th nzLeft="0px" nzShowCheckbox [(nzChecked)]="allChecked" (nzCheckedChange)="checkAll($event)"></th>
                <th></th>
                <th *ngFor="let th of tableThName">{{th.name}}</th>
                <th nzRight="0px"></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of rowSelectionTable.data;let i=index">
                <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="CheckedChange($event)"></td>
                <td>{{(carListParam.pageIndex-1)*carListParam.pageSize+i+1}}</td>
                <td *ngFor="let tr of tableThName">{{data[tr.field]}}</td>
                <td nzRight="0px">
                    <button nz-button nzType="primary" nzGhost (click)="goCarInfoDetail(data)"></button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>
< / div >
Ng-zorro
Mar.10,2021