javascript Angular Dynamic使用自定义组件添加行

我正在尝试添加行以满足搜索/筛选要求。有100个字段要筛选。我的老板决定将它们保留在下拉列表中（在这个例子中，我保留了经理，城市和名称）。当用户从下拉菜单中选择一个时，（比如说，城市），下一个框应该显示另一个所有城市的下拉列表。如果用户选择名称，则下一个框应显示文本框。用户可以添加尽可能多的行（过滤器）。
我试过了，并且能够动态添加行并显示文本框或下拉列表（基于inputType）。但我的问题是，当我从经理更改为名称，然后它改变了所有框在右侧的文本框。当添加一个新的行/文件时，它会自动显示以前选择的下拉列表或测试。这意味着我想要的是右侧的下拉列表或文本框应该只出现在用户从左侧选择一个值。
我不确定我是否解释得很好。但请随意提问。
下面是我到目前为止所做的例子。提前感谢您的帮助！

StackBlitz Demo

我将把过滤分解为单独的filter-row-selector组件。这样每个选择器本身就不会影响其他选择器。我认为这个演示更接近你想要的：https://angular-mat-select-example-rj86ng.stackblitz.io
filter-row-selector.component.ts

import { AdvanceFilterFieldsModel } from '../advance.filter.fields.model';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'filter-row-selector',
  templateUrl: './filter-row-selector.component.html',
  styleUrls: ['./filter-row-selector.component.css'],
})
export class FilterRowSelectorComponent implements OnInit {
  @Input('field') field: any;
  advanceFilterFieldsModel: AdvanceFilterFieldsModel[] = [
    { name: 'Manager', value: 'Manager', inputType: 1 },
    { name: 'State', value: 'State', inputType: 1 },
    { name: 'Name', value: 'Name', inputType: 2 },
  ];

  filterPlaceHolerArray: Array<any> = [{}];
  managerArray: Array<any> = [
    { name: 'Manager 1', value: 'Manager1' },
    { name: 'Manager 2', value: 'Manager2' },
    { name: 'Manager 3', value: 'Manager3' },
  ];

  stateArray: Array<any> = [
    { name: 'Alabama', value: 'AL' },
    { name: 'Alaska', value: 'AA' },
    { name: 'Florida', value: 'FL' },
  ];

  displayTextboxFieldValue: boolean = false;
  displaySelectboxFieldValue: boolean = false;

  constructor() {}

  ngOnInit() {}

  populateFieldValue(value: any) {
    console.log(value);
    if (value.name == 'Manager') {
      this.filterPlaceHolerArray = this.managerArray;
    } else if (value.name == 'State') {
      this.filterPlaceHolerArray = this.stateArray;
    }
    if (value.inputType == 1) {
      this.displaySelectboxFieldValue = true;
      this.displayTextboxFieldValue = false;
    } else if (value.inputType == 2) {
      this.displayTextboxFieldValue = true;
      this.displaySelectboxFieldValue = false;
    }
  }
}

filter-row-selector.component.html

<td>
  <div class="input-group">
    <div class="input-group-prepend">
      <div (click)="deleteFieldValue(i)" class="input-group-text">
        <i class="mdi mdi-close mdi-18px"></i>
      </div>
    </div>
    <mat-select
      (valueChange)="populateFieldValue($event)"
      [(ngModel)]="field.name"
      placeholder="Select"
      appearance="outline"
      style="width: 75% !important; border-bottom-style: ridge !important;"
    >
      <mat-option
        *ngFor="let filterField of advanceFilterFieldsModel"
        [value]="filterField"
      >
        {{ filterField.name }}
      </mat-option>
    </mat-select>
  </div>
</td>
<td>
  <input
    *ngIf="displayTextboxFieldValue"
    [(ngModel)]="field.value"
    class="form-control"
    type="text"
    name="{{ fieldName }}"
    placeholder="{{ fieldName }}"
  />
  <mat-select
    *ngIf="displaySelectboxFieldValue"
    placeholder="Select"
    appearance="outline"
    style="width: 500% !important; border-bottom-style: ridge !important;"
  >
    <mat-option
      *ngFor="let filterPlaceHoler of filterPlaceHolerArray"
      [value]="filterPlaceHoler"
    >
      {{ filterPlaceHoler.name }}
    </mat-option>
  </mat-select>
</td>

javascript Angular Dynamic使用自定义组件添加行

1条答案

相关问题

热门标签

最新问答