动态添加与删除查询条件

代码层：

  <div class="group-conditions">
    <div>查询项:</div>
    <div class="condition-item" *ngFor="let item of groupConditions, let i = index">
      <div>
        <button nz-button nzType="primary" disabled>关系</button>
        <nz-select [(ngModel)]="item.relation">
          <nz-option *ngFor="let data of relationship" [nzLabel]="data.label" [nzValue]="data.value"></nz-option>
        </nz-select>
      </div>
      <div>
        <button nz-button nzType="primary" disabled>字段名</button>
        <nz-select [(ngModel)]="item.wordType">
          <nz-option *ngFor="let data of wordType" [nzLabel]="data.label" [nzValue]="data.value"></nz-option>
        </nz-select>
      </div>
      <div>
        <button nz-button nzType="primary" disabled>操作符</button>
        <nz-select [(ngModel)]="item.symbol">
          <nz-option *ngFor="let data of operateSymbol" [nzLabel]="data.label" [nzValue]="data.value"></nz-option>
        </nz-select>
      </div>
      <div style="margin-right: 10px; vertical-align: top;">
        <nz-input-group nzSize='middle' nzAddOnBefore="输入值">
          <input type="text" [(ngModel)]="item.conditionVal" placeholder="请输入值" nz-input />
        </nz-input-group>
      </div>
      <div>
        <button nz-button nzType="danger" (click)="remove(i)">删除</button>
      </div>
    </div>
  </div>

其中this.groupConditions只是为了设置新增条件时每行各个字段的初始值的初始值，每次点击新增条件的时候，就让该数组添加一个一模一样的对象元素就行，option循环的不是该数组，每一个select组件的option循环的都是对应的数组，关系对应relationship ，字段名对应wordType，操作符对应operateSymbol
删除时，拿到该行对应的index，用数组的splice移除就行了

 // 初始化群组条件
 	 ngOnInit(): void {
 	   this.initGroupCondition();
 	 }
 	 
	 initGroupCondition(): void {
	   this.groupConditions = [{ relation: '&&', wordType: 'employeeName', symbol: '=', conditionVal: '' }];
	   this.relationship = [
	     { label: '并且', value: '&&' },
	     { label: '或', value: '||' }
	   ];
	   this.wordType = [
	     { label: '员工姓名', value: 'employeeName' },
	     { label: '出生日期', value: 'birthDate' },
	     { label: '工号', value: 'jobNumber' },
	     { label: '籍贯', value: 'birthPlace' },
	     { label: '性别', value: 'sex' },
	     { label: '岗位', value: 'post' },
	     { label: '年龄', value: 'age' }
	   ];
	   this.operateSymbol = [
	     { label: '等于', value: '=' },
	     { label: '大于', value: '>' },
	     { label: '大于等于', value: '>=' },
	     { label: '小于', value: '<' },
	     { label: '小于等于', value: '<=' },
	     { label: '包含', value: 'like' },
	     { label: '不包含', value: 'not like' }
	   ];
	 }
	
	// 添加条件
	addConditions(): void {
	   this.groupConditions.push(Object.assign({}, this.conditionObj));
	}

   // 删除条件
  	remove(index): void {
      this.groupConditions.splice(index, 1);
  	}