Question

我有一个具有复选框和下拉菜单的表单，并且下拉菜单中存在的数据是从json提取的。我必须选择下拉菜单选项，单击提交时在文本框中写入文本，我必须过滤并在表中显示过滤的数据。

<form [formGroup]="reportsForm" (ngSubmit)=onSubmit(reportsForm.value)>
        <label> Task Status</label>
        <div>

            <label class="checkbox-inline"></label>
            <input type="checkbox" formControlName="whole" id="whole" value="whole"> a

            <label class="checkbox-inline"></label>
            <input type="checkbox" formControlName = "progress" id= "progress" value="progress"> b

        </div>
        <label>Date Time (GMT)</label>
        <div class="">
            <div class="col-md-6">
                <label>FROM</label>
                <input type="date" formControlName = "bfrom" id= "from" class="form-control">
            </div>
            <div class="col-md-6">
                <label>TO</label>
                <input type="date" formControlName = "to" id= "to" class="form-control">
            </div>
        </div>
        <label>Group Name</label>
        <div class="input-group-btn">
            <select class="form-control" formControlName="groupname" id="groupname">
                <option>Select</option>
                <option *ngFor="let x of y" >{{x.grouping}}</option>
            </select>
        </div>
        <label>Task Name</label>
        <div class="input-group-btn">
            <input type="text" formControlName="taskname" id="taskname" class="form-control">
        </div>
        <label>ASSIGNEE</label>
        <div class="input-group-btn">
            <select class="form-control" formControlName="assignee" id="assignee">
                <option>Select</option>
                <option *ngFor="let x of y" >{{x.assignee}}</option>
            </select>
        </div>
        <label>Frequency</label>
        <div class="input-group-btn">
            <select class="form-control" formControlName="frequency" id= "frequency">
                <option>Select</option>
                <option *ngFor="let x of y">{{x.frequency}}</option>
            </select>
        </div>
        <div class="buttons">
            <button type="submit" class="btn">Submit</button>

        </div>
    </form>
                   <table class="table table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col ">GroupName</th>
                                <th scope="col ">Assignee</th>
                                <th scope="col ">frequency</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let x of y">
                                <td scope="col">{{x.grouping}}</td>
                                <td scope="col">{{x.assignee}}</td>
                                <td scope="col">{{x.frequency}}</td>
                            </tr>


                        </tbody>
                    </table>

我已经在我的组件中创建了一个表单，我已经创建了所有表单数据，这些数据是根据我对下拉菜单和复选框的选择在提交表单时填充的。而且我必须过滤这些数据并在表单提交时显示在表格上

@Component({
  selector: 'app-rep',
  templateUrl: './rep.component.html',
  styleUrls: ['./rep.component.css']
})
export class RepComponent implements OnInit {
  y;
  users;
  reportsForm: FormGroup;
  constructor(private service: RepositoryService) { }

  ngOnInit() {

    this.reportsForm = new FormGroup({
      whole: new FormControl(''),
      progress: new FormControl(''),
      bfrom: new FormControl(''),
      to: new FormControl(''),
      groupname: new FormControl(''),
      taskname: new FormControl(''),
      assignee: new FormControl(''),
      frequency: new FormControl(''),

    });

    this.getTasks();
    this.getUsers();
  }

  public getUsers() {
    this.service.getData(usersUrl).subscribe(res =>{this.users = res.data.items});
  }
  public getTasks() {

    this.service.getData(reportsUrl).subscribe(res =>{this.y= res.data.items});

  }
  onSubmit(filterValue:any) {

    console.log(this.reportsForm);

  }
}

Answer 1

最后，我想出了一种适用于多个过滤器的解决方案，在提交数据时，应在表中对其进行过滤。但是，如果您有许多条件，则需要进行优化。

  onSubmit() {
    this.filteredtasks=[]; 
    let grp = this.reportsForm.value.groupname;
    let fre = this.reportsForm.value.frequency;
    let as= this.reportsForm.value.assignee;
    let tsknm = this.reportsForm.value.taskname;


    for(let i=0; i< this.y.length; i++) {
      if(
          (grp == "" || grp == this.tasks[i].groupname) && 
          (fre == "" || fre == this.tasks[i].frequency) &&
          (as== "" || as== this.tasks[i].assignee) &&
          (tsknm == "" || tsknm == this.tasks[i].taskname)
        ) {
        this.filteredtasks.push(this.y[i]);
      }
    }

filteredtasks数组具有过滤列表。

   <table class="table table table-bordered">
        <thead>
            <tr>
                <th scope="col ">GroupName</th>
                <th scope="col ">Assignee</th>
                <th scope="col ">frequency</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let x of filteredtasks">
                <td scope="col">{{x.groupname}}</td>
                <td scope="col">{{x.assignee}}</td>
                <td scope="col">{{x.frequency}}</td>
            </tr>
        </tbody>
    </table>

如何过滤多个表单字段并以角度5显示在表格中？

1 个答案: