0

我是编程新手，尤其是网络新手。我有一个 MultiSelect 框，它在选择一个项目时绘制一个折线图，例如，您选择 n 个项目，您可以在图表上看到 n 个行，旁边有两个日期选择器显示（从和To) 默认情况下从昨天到今天。它工作正常，现在的问题是如果用户选择 n 个项目并想要更改日期范围应该按下过滤器按钮以应用更改；我不知道如何让这个按钮执行与我的多选更改处理程序相同的代码。

这是我的复选框值更改功能：

 public valueChange(value: string): void {
  this.from = formatDate(this.value, 'yyyy-MM-dd', 'en_US');
  this.to = formatDate(this.value1, 'yyyy-MM-dd', 'en_US');

  if (this.temp.length < value.length) {
     console.log('seleted');
     this.Legendtemp.push(value);
     this.serisName = value;
     this.services.getWindAverage(value, this.from, this.to).subscribe(s => {
        this.selected = s;
        this.series.push(this.selected);
        i = this.series.length - 1;
     });
     this.temp.push(value.length);
  } else {
     console.log('Dseleted');
     if (this.temp.length != 0) {
        this.temp.pop();
        this.selected.pop();
        this.temp.length;
     }
  }
}

valueChange 是 multiselectBox 函数，value 是选定项。getWindAverage 是我的服务，它将日期与选定的项目一起传递到后端以获得结果，现在我的按钮应该如何工作？这是它的功能

onFilter(){}

这是我的模板：

        <div class="card"  style="margin: 0 Auto;width: 1200px;">
      <div class="card-body">
        <kendo-multiselect style="width: 50%;"  [data]="rslt"  [textField]="'turbine_name'"  [valueField]="'turID'"  (valueChange)="valueChange($event)" [valuePrimitive]="true" placeholder="Select a Turbine..." >
        </kendo-multiselect>
      <label>From:</label>
      <kendo-datepicker (valueChange)="onchange()" [(value)]="value"  format="dd/MM/yyyy"></kendo-datepicker>
      <label>To:</label>
      <kendo-datepicker format="dd/MM/yyyy" [(value)]="value1"></kendo-datepicker> 
      <button type="button"  (click)="onFilter()"  class="btn btn-success" style="margin-left: 5px;"  >Filter</button>
      </div>
     </div>
4

1 回答 1

0

从 Angular 的 Kendo UI 文档来看，您使用的控件似乎支持该ngModel指令，但为了使其正常工作，您需要确保FormsModule在声明您提到的组件的模块中导入了（导入模块意味着它应该放在imports数组中）。

导入后，FormsModule您可以返回刚刚发布的模板并执行以下操作：

HTML：

  <div class="card" style="margin: 0 Auto;width: 1200px;">
     <div class="card-body">
        <kendo-multiselect
                          style="width: 50%;"
                          [data]="rslt"
                          textField="turbine_name"
                          valueField="turID"
                          (valueChange)="onMultiSelectValueChanged()"
                          [(ngModel)]="selectedTurbines"
                          name="selectedTurbines"
                          [valuePrimitive]="true"
                          placeholder="Select a Turbine...">
        </kendo-multiselect>
        <label>From:</label>
        <kendo-datepicker (valueChange)="onchange()" [(value)]="value" format="dd/MM/yyyy"></kendo-datepicker>
        <label>To:</label>
        <kendo-datepicker format="dd/MM/yyyy" [(value)]="value1"></kendo-datepicker>
        <button type="button" (click)="onFilter()" class="btn btn-success" style="margin-left: 5px;">Filter</button>
     </div>
  </div>

为了使其正常工作，您还需要在.ts文件中做一些工作：

  value: string;
  value1: string;
  selectedTurbines: string[] = [];

  onMultiSelectValueChanged() {
     this.plotChart();
  }

  onFilter() {
     this.plotChart();
  }

  private plotChart() {
     this.from = formatDate(this.value, 'yyyy-MM-dd', 'en_US');
     this.to = formatDate(this.value1, 'yyyy-MM-dd', 'en_US');

     if (this.temp.length < this.selectedTurbines.length) {
        console.log('seleted');
        this.Legendtemp.push(this.selectedTurbines);
        this.serisName = this.selectedTurbines;
        this.services.getWindAverage(this.selectedTurbines, this.from, this.to).subscribe(s => {
           this.selected = s;
           this.series.push(this.selected);
           i = this.series.length - 1;
        });
        this.temp.push(this.selectedTurbines.length);
     } else {
        console.log('Dseleted');
        if (this.temp.length != 0) {
           this.temp.pop();
           this.selected.pop();
           this.temp.length;
        }
     }
  }

所以基本上我额外做的是将多选的值绑定到组件中的一个属性，并将用于构建绘图的逻辑移动到一个不直接依赖于所选涡轮机的新函数中，而是使用绑定的属性来访问它们。这样，您可以从多选更改处理程序和按钮单击处理程序调用此代码。我希望这可以帮助你。

于 2020-06-24T09:09:45.153 回答